How to Open a Bootstrap Dropdown on Hover Instead of Click

By the end of this page, you will understand how Bootstrap dropdowns normally work, how to change them to open on hover using CSS or JavaScript, how to remove the caret arrow, and when this behavior is useful or risky in real projects.

Bootstrap dropdowns are designed to open on click by default. This is intentional because click-based menus work better across devices, especially on touch screens where hover does not exist in the same way it does on desktops.

To make a dropdown open on hover, you usually change the behavior in one of these ways:

• CSS-only approach: show the dropdown menu when the parent item is hovered
• JavaScript approach: listen for mouse events and programmatically open or close the menu

Removing the small arrow is much simpler. In many Bootstrap versions, the arrow is just a separate element such as:

<b class="caret"></b>

If you remove that element from the HTML, the arrow disappears. In newer Bootstrap versions, the arrow may be created with CSS instead of an actual HTML element.

Why this matters:

• Navigation behavior affects usability
• Hover interactions can feel faster on desktop
• Poorly implemented hover menus can be frustrating and inaccessible
• Bootstrap often expects specific classes like .open or .show, depending on version

So the real lesson is not just "how to do it," but also how Bootstrap dropdown state works and how to customize component behavior safely.

Think of a dropdown menu like a small drawer in a cabinet.

• Click behavior means you press the handle to open the drawer.
• Hover behavior means the drawer opens when your hand passes over it.

Hover can feel quick, but it can also cause the drawer to open accidentally when you did not mean to use it. That is why many UI libraries choose click by default.

The caret arrow is just a visual label that says, "This item has more options." Removing it is like removing the sticker from the drawer front. The drawer still works; it just looks simpler.

CSS-only hover dropdown

In older Bootstrap versions, a common approach is:

.dropdown:hover .dropdown-menu {
  display: block;
}

With HTML like:

<li class="dropdown">
  <a href="#" class="dropdown-toggle">
    Menu
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
  </ul>
</li>

This works because when the user hovers over .dropdown, the nested .dropdown-menu becomes visible.

Removing the arrow

If your markup includes this:

<b class="caret"></b>

just remove it:

<li class="dropdown">
  <a href="#" class="dropdown-toggle">Menu</a>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
  </ul>
</li>

A more complete example

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle">Products</a>
    <ul class="dropdown-menu">
      <li><a href="#">Laptops</a></li>
      <li><a href="#">Phones</a></li>
      <li><a href="#">Accessories</a></li>
    </ul>
  </li>
</ul>

.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

What this does

• display: block; shows the menu on hover
• margin-top: 0; can help prevent a small gap that causes flicker in some layouts

JavaScript approach

If you need more control, you can toggle classes with JavaScript or jQuery. For older Bootstrap versions using jQuery:

$('.dropdown').hover(
  function () {
    $(this).addClass('open');
  },
  function () {
    $(this).removeClass('open');
  }
);

This approach matches Bootstrap's older dropdown state class more closely than plain CSS in some cases.

Consider this example:

<li class="dropdown">
  <a href="#">Menu</a>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
  </ul>
</li>

.dropdown-menu {
  display: none;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

Step by step

1. The page loads.
2. .dropdown-menu starts with display: none, so it is hidden.
3. The user moves the mouse over the <li class="dropdown"> element.
4. The CSS selector .dropdown:hover .dropdown-menu now matches.
5. display: block is applied.
6. The submenu becomes visible.
7. When the mouse leaves the .dropdown area, the :hover state ends.
8. The menu returns to display: none.

Important detail

If there is a small gap between the main link and the dropdown menu, the mouse can briefly leave the hover area and the menu may disappear. That is why developers often adjust spacing or positioning to keep the hover area continuous.

Hover-based dropdowns are commonly used in desktop-first navigation systems such as:

• Company websites with top navigation menus
• E-commerce stores where category menus expand quickly
• Admin dashboards with grouped navigation items
• Documentation sites with nested menu sections

Examples:

• A product menu that opens when a user hovers over "Products"
• A services menu that reveals consulting, support, and training links
• A desktop navigation bar where users expect fast mouse-driven interaction

However, many modern applications avoid hover-only menus because:

• mobile users cannot hover
• accessibility is harder
• accidental opening can annoy users

That means hover is best when used thoughtfully, often with a fallback for touch devices.

In real projects, developers usually do more than add one CSS rule.

Common patterns

1. Desktop-only hover behavior

Developers often enable hover only on larger screens:

@media (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

This keeps mobile behavior click-based.

2. Removing Bootstrap's default click trigger

If the anchor has data-toggle="dropdown", Bootstrap may still attach click behavior in older versions. Teams sometimes remove or override this depending on the version and desired interaction.

3. Guarding against flicker

Developers often add:

• margin-top: 0
• careful positioning
• hover delays in JavaScript

This prevents menus from disappearing when the mouse moves between elements.

4. Progressive enhancement

A codebase may keep click behavior as the baseline and add hover only for desktop users with JavaScript or CSS enhancements.

5. Accessibility checks

In production code, teams verify:

• keyboard users can still open the menu
• focus styles remain visible
• links are reachable without a mouse

Hover alone should not be the only way to access navigation.

1. Using hover-only navigation for all devices

Broken idea:

.dropdown:hover .dropdown-menu {
  display: block;
}

Problem:

• This may work poorly on touch devices
• Users cannot rely on hover on phones and tablets

Better approach:

• Use media queries for desktop-only hover
• Keep click behavior for mobile

2. Forgetting to remove the caret element

Broken expectation:

<a href="#" class="dropdown-toggle">Menu</a>

If your project still shows an arrow, the caret may be coming from CSS in your Bootstrap version, not from <b class="caret"></b>.

Fix:

• Check whether the arrow is HTML or CSS-generated
• Remove the element or override the CSS

3. Causing flicker when moving the mouse

Broken layout:

.dropdown-menu {
  margin-top: 10px;
}

Problem:

• The gap can cause the hover state to break

Better:

.dropdown-menu {
  margin-top: 0;
}

4. Ignoring Bootstrap version differences

Older Bootstrap versions often use classes like:

• .open

Newer versions often use:

• .show

Do not copy code blindly across versions.

5. Breaking keyboard navigation

If you only support hover, keyboard users may not be able to access submenu items.

Better approach:

• keep semantic links
• test with Tab key
• avoid making hover the only trigger

/* Basic hover dropdown */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Avoid hover gap flicker */
.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

/* Desktop-only hover */
@media (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

// Older Bootstrap + jQuery approach
$('.dropdown').hover(
  function () {
    $(this).addClass('open');
  },
  function () {
    $(this).removeClass('open');
  }
);

<!-- Remove this to hide the old Bootstrap caret -->
<b class="caret"></b>

Quick rules

• Use hover carefully; click is usually the safer default.
• Remove the caret element if it exists in the HTML.
• Check your Bootstrap version before using .open or .show.
• Test desktop, mobile, and keyboard navigation.
• Use media queries if hover should only apply on large screens.

Can I make a Bootstrap dropdown open on hover with only CSS?

Yes. A common solution is:

.dropdown:hover .dropdown-menu {
  display: block;
}

This is simple, but it may not behave well on touch devices.

How do I remove the small arrow from a Bootstrap dropdown?

In older Bootstrap versions, remove the caret element from the HTML:

<b class="caret"></b>

In newer versions, the arrow may come from CSS instead.

Is hover better than click for dropdown menus?

Not always. Hover can feel faster on desktop, but click is usually more reliable and accessible across devices.

Why does my dropdown flicker when I move the mouse?

There may be a gap between the trigger and the menu. Reduce spacing, adjust positioning, or set margin-top: 0.

Does this work the same in every Bootstrap version?

No. Bootstrap versions differ in markup, class names, and JavaScript behavior. Always check the version you are using.

Should I keep data-toggle="dropdown" when using hover?

Sometimes yes, sometimes no. It depends on whether you want click as a fallback and which Bootstrap version you use.

How do I keep hover behavior off mobile devices?

Use a media query so hover behavior only applies on larger screens.

• CSS pseudo-classes — :hover is the key selector used in hover-based dropdowns.
• Event handling — JavaScript hover behavior depends on mouse events such as enter and leave.
• Responsive design — hover interactions often need different behavior on desktop and mobile.
• Bootstrap components — dropdowns are one example of how Bootstrap provides reusable UI patterns.
• Accessibility — navigation should still work for keyboard users and touch devices.
• CSS display and visibility — dropdown menus are commonly shown and hidden with these properties.
• jQuery class manipulation — older Bootstrap projects often use addClass() and removeClass() to control menu state.