How can I make a Bootstrap Dropdown Activate on Hover Instead of Click?

Hover-Activated Bootstrap Dropdown

Question:

How can I alter a Bootstrap dropdown menu to trigger on hover instead of click?

Answer:

While Bootstrap does not natively allow hover activation, you can achieve this customization with CSS. Here's how:

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap to prevent closing */
}

This code overrides the default display property of the dropdown menu when the parent element (.dropdown) is hovered over, making it visible. The margin-top property eliminates the gap that typically appears between the dropdown menu and its container.

By modifying the CSS as described, your dropdown menus will now open when you hover over their parent elements, providing a more user-friendly and intuitive navigation experience.

The above is the detailed content of How can I make a Bootstrap Dropdown Activate on Hover Instead of Click?. For more information, please follow other related articles on the PHP Chinese website!