How Can I Make Twitter Bootstrap Dropdowns Appear on Hover Instead of Click?

Hovering Triggers Twitter Bootstrap Menu Dropdown

When using Twitter Bootstrap, it's possible to make the menu dropdown automatically on hover instead of requiring a click. This is achieved through CSS modifications.

To activate the dropdown on hover, target the selector for the hidden menu option. For instance, if using the sample from the Twitter Bootstrap page:

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

However, if using responsive features, you'll want to exclude this functionality when the navbar collapses on smaller screens. Wrap the above code in a media query:

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

Removing the Dropdown Arrow

To hide the arrow (caret), remove it from the dropdown-toggle anchor element, depending on your version of Twitter Bootstrap:

• Bootstrap 3: Remove the HTML from the element.
• Bootstrap 2 and lower: Use CSS to target and style the :after pseudo element:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

Remember to understand how these concepts work and experiment with the code to customize the behavior as needed.

The above is the detailed content of How Can I Make Twitter Bootstrap Dropdowns Appear on Hover Instead of Click?. For more information, please follow other related articles on the PHP Chinese website!