---

Search posts under Bootstrap:

---

Bootstrap nav dropdown menu on hover in Bootstrap

How to make twitter bootstrap menu dropdown on hover rather than on click?

To convert Bootstrap nav dropdown menu on hover from on click, add following .css class into Site.css (in asp.net mvc project) or in any other project add them into a custom .css.

.dropdown:hover .dropdown-menu {
     display: block !important;
 }

This ensures that the nav dropdown menu opens up when user just mouse hover on the main menu rather than clicking it.

To disable the dropdown effect in small screen, read this solution.

Using jQuery

The same behavior as above can be achived using jQuery as well by writing below JavaScript code.

$('.dropdown').hover(function(){ 
   $('.dropdown-toggle', this).trigger('click'); 
});

This instruct the browser that on element whose class is dropdown, attach hover event and trigger click event on element whose class attribute is dropdown-toggle when user mouse hover those elements.