How to make Twitter Bootstrap menu dropdown on hover rather than click?
I’d like to have my Bootstrap menu automatically drop down on hover, rather than having to click the menu title. I’d also like to lose the little arrows next to the menu titles.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Kristen Berry
To get the menu to automatically drop on hover then this can achieved using basic CSS. You need to work out the selector to the hidden menu option and then set it to display as block when the appropriate li tag is hovered over. Taking the example from the twitter bootstrap page, the selector would be as follows:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
However, if you are using Bootstrap’s responsive features, you will not want this functionality on a collapsed navbar (on smaller screens). To avoid this, wrap the code above in a media query:
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}