Bootstrap 3 Hover Dropdown

As far I can remember, the Boostrap dropdown menu has always worked on click event. So unless you’re doing a web app, you’re most likely to want the Bootstrap dropdown menu to work on mouse-over.

Here are the two solutions I use, depending on the project:

1) CSS only technique (30 seconds)

This is in my opinion the easiest way to get the Bootstrap 3 dropdown menu to work on hover state. It’s lightweight and super easy to implement. Check out the JavaScript technique if you want more control of the hover state of Bootstrap dropdown menus.

@media (min-width: 768px) {n        .dropdown:hover .dropdown-menu {n                display: block;n        }n}

2) JavaScript technique (5 min)

The main advantage of this solution over the first one is that you have a better control of the behavior. Using JavaScript allows you to add a delay before the dropdown closes automatically. This is a good thing in term of user experience / usability.

Edit July 2015, from the comments:

CWSpear’s plugin is using dirty hacks, and is not working on modern desktop browsers with touch support, so I made a proper plugin which is using only the Bootstrap javascript API, hence it works on all devices without braking any functionality: https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

Download the pluginn

How to get started?

1. Include jQuery, Bootstrap and the plugin

2. Initialize the plugin using the following:

$.fn.bootstrapDropdownHover();

Instead of re-inventing the wheel, I strongly advise you to use the plugin bootstrap-hover-dropdown, which is well-maintained by Cameron Spear. It takes no longer than 5 min to implement, and you’ll have a perfect hover dropdown menu for Bootstrap 3.

It’s pretty easy to get it working:

Download the plugin

1. 1. Extract bootstrap-hover-dropdown.min.js to your /javascript/ folder
   2. Call it after jQuery & Bootstr
   3. Initialize the plugin using the following:

$('.dropdown-toggle').dropdownHover();

What’s your favorite method to make Bootstrap navigation dropdown work on mouseover?

Answer in the comments 😉