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;
}

Understanding how these CSS elements work will enhance your ability to customize Bootstrap menus to meet your specific needs.

The above is the detailed content of How Can I Create Hover-Activated Dropdowns in Twitter Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!