CODEWITHSUNDEEP
htmltwitter-bootstrapcss
TrickMonkey
TrickMonkey

Reputation: 155

Bootstrap dropdown hover issue

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

Upvotes: 1

Views: 1676

Answers (2)

garchompstomp
garchompstomp

Reputation: 130

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

Upvotes: 0

JJ Gerrish
JJ Gerrish

Reputation: 882

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.

Upvotes: 2

Related Questions