懸停的Bootstrap子菜單

注意：Donot將其標記爲重複的，因爲我只想要不使用額外JS和/或css的解決方案！懸停的Bootstrap子菜單

我使用引導3，我從here知道.dropdown-submenu已經在引導3 RC

被刪除我檢查this太...我要像this但沒有任何額外的JS類似的菜單！有沒有想在我的菜單中獲得:hover的效果，而不需要添加任何像上面的JS鏈接？我只想使用純Bootstrap 3類。

我試過了，但它沒有像預期的那樣工作！

    <ul id="menu" class="nav navbar-nav navbar-right margin-bottom-half-em"> 
         <li class="aboutus dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">About Us <span class="caret"></span></a> 
          <ul class="dropdown-menu bg-dark-gray"> 
           <li><a href="#" class="overview">Overview</a></li> 
           <li><a href="#" class="ourTeam">Our Team</a></li> 
           <li><a href="#" class="ourMission">Our Missions</a></li> 
          </ul> 
         </li>....

來源

2015-05-27 Junaid

你可能想看看過渡http://www.w3schools.com/css/css3_transitions.asp – Daniel

的jsfiddle：http://jsfiddle.net/NzvKC/763/

您可以使用:hover上<a>和<ul>標籤，以顯示下拉：

a.dropdown-toggle:hover + ul.dropdown-menu, 
ul.dropdown-menu:hover { display: block; }

但是你要刪除.dropdown-menu到2px的邊緣不將鼠標從<a>移動到<ul>

時會丟失：懸停狀態

.dropdown-menu { margin-top: 0; }

來源

2015-05-27 08:06:12 Matthias

謝謝，但正如我所提到的，我不想寫額外的CSS或JS ...是否有任何純粹的Bootstrap 3解決方案？ – Junaid

哦，我以爲你只是不想添加新的類。但我想沒有bootstrap解決方案可以從bootstrap中刪除某些內容？所以這3條CSS線可能是解決這個問題的最簡單方法之一。 – Matthias

懸停的Bootstrap子菜單

回答

相關問題