Bootstrap dropdown hover issue

Question

I have a bootstrap default dropdown on my website. The issue I am having is that I want the dropdown to show up on hover. It is working as intended but has a small issue. It goes away unless I go on it through the dropdown arrow if I go on it from anywhere beside the arrow but directly below the dropdown item.. it goes away so it is very inconsistent. How can I make it better? I have tried adding padding to the dropdown item but it didn't help at all.

HTML:

<nav class="navbar navbar-inverse" role="navigation">
  <div class="collapse navbar-collapse text-right">
    <ul class="nav navbar-nav pull-left">
      <li>
        <div class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Testing</a>
          <ul class="dropdown-menu dropdown-menu-arrow">
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</nav>

CSS:

a {
  color: #fff
}

a:focus,
a:hover {
  color: #fff!important;
  border-bottom: 1px solid #fff;
  text-decoration: none
}

@media (min-width:768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
  .dropdown-menu-arrow:before {
    border-bottom: 7px solid rgba(0, 0, 0, 0.2);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    display: inline-block;
    left: 9px;
    position: absolute;
    top: -7px;
  }
  .dropdown-menu-arrow::after {
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    left: 10px;
    position: absolute;
    top: -6px;
  }
}

JSFiddle Demo

please expand the output window as bootstrap hides navigation on smaller devices to show the toggle menu @FarazAhmad — TrickMonkey, Jan 27 '18 at 22:23
You can get add id to the drop down ul, and set its position in pixels from top, but there must be a better solution. — , Jan 27 '18 at 22:34
Its margin at the top of the `.dropdown-menu` add this line or see my answer. `.dropdown-menu { margin-top: 0; }` — Radmation, Jul 19 '18 at 16:45
Possible duplicate of [How to make Twitter Bootstrap menu dropdown on hover rather than click](https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click) — Radmation, Jul 20 '18 at 16:10

score 2 · Accepted Answer · answered Jan 27 '18 at 22:36

Adding padding to the .dropdown-toggle item fixes the issue as the padding is part of the hoverable area of the item.

This is the code I added:

.dropdown-toggle {
    padding: 10px;
}

Link to updated JSFiddle Demo

You said you added padding to the "dropdown item" which I am guessing means you tried to add it to the actual dropdown rather than the toggle for the dropdown. This wouldn't work as the dropdown toggle is the trigger that has the :hover pseudo class, therefore you must extend this item's hoverable area (with padding) to cover the gap between the trigger and the dropdown itself.

score 0 · Answer 2 · answered May 19 '21 at 16:29

JJ's answer didn't work for me. The issue I had was a very small gap between the dropdown-toggle, and the dropdown-menu. This caused the dropdown to disappear if I moved the cursor down slowly from the menu item to the dropdown.

I added this to my css:

.dropdown-menu {
  margin: 0px;
}

Bootstrap dropdown hover issue

2 Answers2