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

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

来源

2017-04-18 AEON

的可能的复制[如何使悬停，而不是点击Twitter的引导菜单下拉（http://stackoverflow.com/questions/8878033/如何对化妆Twitter的引导菜单，下拉上悬停，而高于点击） – Aslam

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>请添加了jQuery已创建

来源

2017-04-18 06:34:32

HTML页面的头我希望这将工作well.i尝试这种代码，我得到了结果 **

.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; 
 
}

<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>

来源

2017-04-18 06:39:17 Mulwaffer

在你的CSS包含此代码

.dropdown:hover .dropdown-menu { 
    display: block; 
    margin-top: 0; 
}

来源

2017-04-19 06:19:24

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

回答

相关问题