在父引導欄上懸停時顯示導航欄中的子菜單下拉菜單

Question

Hi朋友只有在其父母被徘徊時試圖顯示子菜單下拉列表，但其父母被自動懸停時顯示。這裏是代碼..

<nav class="navbar navbar-default"> 
    <div class="container"> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
       <a class="dropdown-toggle disabled" data-toggle="dropdown" href="https://www.drona.in/current-affairs/">GOVT JOBS</a> 
     <li class="dropdown-submenu"> 
    <a class="test" data-toggle="dropdown" tabindex="-1" href="#">New    
     dropdown <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
     <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
         </ul> 
        </li> 
      </ul> 
     </div> 
    </nav> 

這裏是JS

$(function(){ 
$(".dropdown").hover(   
     function() { 
      $('.dropdown-menu', this).stop(true, true).fadeIn("fast"); 
      $(this).toggleClass('open'); 
      $('b', this).toggleClass("caret caret-up");     
     }, 
     function() { 
      $('.dropdown-menu', this).stop(true, true).fadeOut("fast"); 
      $(this).toggleClass('open'); 
      $('b', this).toggleClass("caret caret-up");     
     }); 

其實2級下拉應該打開時，我徘徊在新的下拉列表中，但其開放的時候我hvering在官立工作

Answer 1

如果你喜歡你只能用CSS來做到這一點。

HTML標記：

<div class="dropdown"> 
     <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html"> 
      Dropdown <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
      <li><a href="#">Some action</a></li> 
      <li><a href="#">Some other action</a></li> 
      <li class="divider"></li> 
      <li class="dropdown-submenu"> 
      <a tabindex="-1" href="#">Hover me for more options</a> 
      <ul class="dropdown-menu"> 
       <li><a tabindex="-1" href="#">Second level</a></li> 
       <li class="dropdown-submenu"> 
       <a href="#">Even More..</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">3rd level</a></li> 
        <li><a href="#">3rd level</a></li> 
       </ul> 
       </li> 
       <li><a href="#">Second level</a></li> 
       <li><a href="#">Second level</a></li> 
      </ul> 
      </li> 
     </ul> 
    </div> 

和CSS

.dropdown-submenu { 
    position: relative; 
} 

.dropdown-submenu>.dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: -6px; 
    margin-left: -1px; 
    -webkit-border-radius: 0 6px 6px 6px; 
    -moz-border-radius: 0 6px 6px; 
    border-radius: 0 6px 6px 6px; 
} 

.dropdown-submenu:hover>.dropdown-menu { 
    display: block; 
} 

.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 

.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 

.dropdown-submenu.pull-left { 
    float: none; 
} 

.dropdown-submenu.pull-left>.dropdown-menu { 
    left: -100%; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
    border-radius: 6px 0 6px 6px; 
}