我正在制作一个网站作为评估,我不知道如何在悬停时打开导航栏中的引导菜单。 链接到bootstrap:http://getbootstrap.com/components/ 代码是:
<nav class="navbar navbar-inverse" position:fixed>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Index.html">Electricity Production</a>
<a href="Index.html"><img src="Images/Edited photos/simple-energy.png" width="60" height="60" alt=""/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle; active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Renewable <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="Renewable's.html">What is renewable energy?</a></li>
<li role="separator" class="divider"></li>
<li><a href="Solar,Wind&Hydro.html">Solar/Wind/Hydro</a></li>
<li><a href="Biomass&Geothermal.html">Biomass & Geothermal</a></li>
</ul>
<li class="dropdown">
<a href="#" class="dropdown-toggle; active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Non-Renewable <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="Non-Renewables.html">What is non-renewable energy?</a></li>
<li role="separator" class="divider"></li>
<li><a href="Fossil_Fuels&nuclear.html">Fossil fuels & nuclear</a></li>
</ul>
</li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
答案 0 :(得分:1)
我希望这会很好用。我尝试了这段代码,我得到了结果 **
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
&#13;
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">ITEM 1</a>
<a href="#">ITEM 2</a>
<a href="#">ITEM 3</a>
</div>
</div>
&#13;
**
答案 1 :(得分:0)
import org.apache.http.HttpHost;
import org.apache.http.HttpResponse;
import org.apache.http.NameValuePair;
import org.apache.http.client.HttpClient;
import org.apache.http.client.config.RequestConfig;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.HttpPut;
import org.apache.http.impl.client.HttpClientBuilder;
import org.apache.http.message.BasicNameValuePair;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.ArrayList;
public class Start {
public static void main(String[] args) throws IOException {
String url = "SECRET";
//CONFIGS
String ip = "127.0.0.1";
HttpHost proxy = new HttpHost(ip, 1080);
HttpClient client = HttpClientBuilder.create().build();
RequestConfig config = RequestConfig.custom().setProxy(proxy).build();
try {
HttpPut put = new HttpPut(url);
put.setConfig(config);
//HEADER SECTION
put.setHeader("SourceApplication","application");
put.setHeader("Content-Type", "application/xml");
//BODY SECTION
ArrayList<NameValuePair> urlParameters = new ArrayList<NameValuePair>();
urlParameters.add(new BasicNameValuePair("company","VALUE1"));
urlParameters.add(new BasicNameValuePair("company2","VALUE2"));
urlParameters.add(new BasicNameValuePair("company3","VALUE3"));
urlParameters.add(new BasicNameValuePair("company4","VALUE4"));
urlParameters.add(new BasicNameValuePair("company5","VALUE5"));
urlParameters.add(new BasicNameValuePair("company6","VALUE6"));
put.setEntity(new UrlEncodedFormEntity(urlParameters));
//PRINT REQUEST
String uri = put.getRequestLine().getUri();
System.out.println(uri);
BufferedReader bd = new BufferedReader(
new InputStreamReader(put.getEntity().getContent()));
StringBuffer rs = new StringBuffer();
String line = "";
while ((line = bd.readLine()) != null) {
rs.append(line);
System.out.println(line);
}
//EXECUTE REQUEST
HttpResponse response = client.execute(put);
System.out.println("Response Code : " + response.getStatusLine().getStatusCode());
responseCode = response.getStatusLine().getStatusCode();
if (response.getStatusLine().getStatusCode() == 200 || response.getStatusLine().getStatusCode() == 204)
//PRINT RESPONSE
BufferedReader bufferedReader = new BufferedReader(
new InputStreamReader(response.getEntity().getContent()));
StringBuffer result = new StringBuffer();
String line1 = "";
while ((line1 = bufferedReader.readLine()) != null) {
result.append(line1);
System.out.println(line1);
}
} else {
System.out.println(response.getStatusLine().getStatusCode());
throw new RuntimeException("Failed : HTTP error code : "
+ response.getStatusLine().getStatusCode());
}
}catch (Exception ex) {
System.out.println("ex Code sendPut: " + ex);
} finally {
httpClient.getConnectionManager().shutdown();
}
}
请将jquery添加到您创建的html页面的头部
答案 2 :(得分:0)
在css中包含此代码
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}