Display Twitter Bootstrap Dropdown on hover by CSS or jQuery

Want to display Twitter Bootstrap Dropdown on hover ? Here’s are some solutions. It can be done using CSS, jQuery Code or a jQuery Plugin.

The CSS solution

// make the child list dropdown visible
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

To hide the caret icon on version 3.0

.navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
    display: none;
}

To hide the caret icon on older version

a.menu:after, .dropdown-toggle:after {
    content: none;
}

There’s one dependency with CSS is that, the class open are not applied which could break any other styling you have done. But with pure bootstrap 2.3 – 3.0 version, it works great.

The jQuery Solution

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).closest('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).closest('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});

Allow click on main menu

The Child menu will be visible on hovering the parent, but the parent menu will not be click-able. The simplest solution is to add a class disabled on the parent menu anchor. You can check reference on stackoverflow

Bootstrap Dropdown on Hover jQuery Plugin

Moreover, there’s also a plugin Bootstrap: Dropdown on Hover Plugin written by Cameron Spear.

<ul class="nav">
    <li class="dropdown">
        <a class="dropdown-toggle disabled" href="http://google.com">
            Dropdown <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
</ul>