如何在悬停时打开引导按钮

时间:2017-04-18 06:30:50

标签: html twitter-bootstrap-3

我正在制作一个网站作为评估,我不知道如何在悬停时打开导航栏中的引导菜单。 链接到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>  

3 个答案:

答案 0 :(得分:1)

我希望这会很好用。我尝试了这段代码,我得到了结果 **

&#13;
&#13;
.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;
&#13;
&#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;
 }