引导程序：悬停在下拉菜单的父菜单中突出显示

Question

i found solution here : http://www.smartmenus.org/

I am using bootstrap fixed nav , I customized it a bit so that instead of clicking menu when someone hover over the menu sub it will be displayed.

This is the code I added:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

and this is the structure of the HTML:

<li class="dropdown">
    <a href="#" 
       class="dropdown-toggle" 
       data-toggle="dropdown" 
       role="button"  
       arial-expanded="false"> Top Menu
    </a>
<ul class="dropdown-menu">
    <li><a href="submenu.php">submenu</a></li>
    <li><a href="submenu.php">submenu</a></li>
    <li><a href="submenu.php">submenu</a></li>
    </li>
</ul>

When hovered over parent menu it displays bottom menu but when I go to sub menu parent menu hover state is gone, it should be selected in that situation. Can someone please help me how to implement it in bootstrap 3.0

Answer 1

Try it with JavaScript:

 $(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop( true, true ).slideDown("fast"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).stop( true, true ).slideUp("fast"); $(this).toggleClass('open'); } ); }); 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" arial-expanded="false">Top Menu</a> <ul class="dropdown-menu"> <li><a href="submenu.php">submenu</a></li> <li><a href="submenu.php">submenu</a></li> <li><a href="submenu.php">submenu</a></li> </ul> </li>