How Can I Create Hover-Activated Dropdowns in Twitter Bootstrap?

Hover Dropdowns for Twitter Bootstrap

When utilizing Twitter Bootstrap's menu system, it can be desirable to have menus automatically drop down on hover, eliminating the need to click the menu title. Additionally, users may prefer to hide the navigation arrows adjacent to the menu titles.

CSS for Hover Dropdowns

To enable automatic dropdowns on hover, implement the following CSS:

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

For responsive functionality, wrap the code in a media query:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

CSS for Hiding Navigation Arrows

Bootstrap 3:

Remove the HTML from the .dropdown-toggle anchor element.

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
</a></p>
<p><strong>Bootstrap 2 & Lower:</strong></p>
<p>Target and remove the arrows using this CSS selector and code:</p>
<pre class="brush:php;toolbar:false">a.menu:after, .dropdown-toggle:after {
    content: none;
}