Bootstrap: on hover in Dropdown menu parent menu highlighted

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

Well for one you closing the `` before closing the `` should be the other way around. Not that this is a cause for the error, but something I noticed. — Jason Bassett, Jan 22 '15 at 14:12
Also remove that spacing between your `<` and `li` in all your links. Should be: `
possible duplicate of [How to make twitter bootstrap menu dropdown on hover rather than click](http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click) — Jason Bassett, Jan 22 '15 at 14:24

score 2 · Answer 1 · answered Jan 22 '15 at 14:19

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>

Bootstrap: on hover in Dropdown menu parent menu highlighted

1 Answers1