Show Bootstrap Dropdown Menu on Mouseover

You may want to show Bootstrap 2.3.2  dropdown menu to show on mouseover/hover and not onclick. Clicking it to show the submenu is a good idea when viewing the site using tablet or mobile phone but not on desktop.

Bootstrap is one of the best CSS framework that you can get. But we need to alter the CSS for menu this time. Because we need to show something.

Paste the code below somewhere on your custom style as long as it overwrites the original bootstrap styling.

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

You may also want to put is inside a conditional CSS to enable it only for bigger screen that is using a mouse. You can put it inside of:

/* Desktop */
@media (min-width: 960px) {

// Your code here


After doing that the dropdown menu should show on mouseover.

*Some links may contain affiliate links. I may get small commission from your purchases to fund this website and to avoid annoying ads.