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
– TrickMonkey, Commented Jan 27, 2018 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. — user2603796
– user2603796, Commented Jan 27, 2018 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
– Radmation, Commented Jul 19, 2018 at 16:45

JJ Gerrish · Accepted Answer · 2018-01-27 22:36:30Z

2

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.

answered Jan 27, 2018 at 22:36

JJ Gerrish

9221 gold badge12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

garchompstomp · Accepted Answer · 2021-05-19 16:29:37Z

0

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;
}

answered May 19, 2021 at 16:29

garchompstomp

1301 silver badge10 bronze badges

Collectives™ on Stack Overflow

Bootstrap dropdown hover issue

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related