How to Create Hover-Activated Dropdown Menus and Remove Arrow Icons in Bootstrap?

Hover-activated Dropdown Menus in Twitter Bootstrap

Many users prefer their Bootstrap menus to drop down upon hovering, eliminating the need for explicit clicks. This article addresses both the hover functionality and the removal of arrow icons next to menu titles.

Hover-activated Dropdown

To enable automatic dropdown on hover, utilize CSS to target the hidden menu option. Add the following code to your CSS:

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

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

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

Removing the Arrow Icon

• Bootstrap 3: Remove the HTML <b> from the .dropdown-toggle anchor element.
• Bootstrap 2 & Lower: Target and remove the arrows using this CSS selector:

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

By incorporating these CSS modifications, you can achieve hover-activated dropdown menus and eliminate arrow icons, enhancing the user experience and customizing your Bootstrap menus as desired.

The above is the detailed content of How to Create Hover-Activated Dropdown Menus and Remove Arrow Icons in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!