Question

我的网站上有一个bootstrap默认下拉列表。我遇到的问题是我希望下拉列表显示在悬停状态。它按预期工作，但有一个小问题。除非我从箭头旁边的任何地方继续下去，但是直接在下拉项目下面，它会消失，除非我继续它。它消失所以它非常不一致。我怎样才能让它变得更好？我尝试在下拉项中添加填充，但它根本没有帮助。

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

Answer 1

向.dropdown-toggle项添加填充可修复问题，因为填充是项目可扩展区域的一部分。

这是我添加的代码：

.dropdown-toggle {
    padding: 10px;
}

Link to updated JSFiddle Demo

你说你在＆＃34;下拉项目中添加了填充＆＃34;我猜这意味着你试图将它添加到实际的下拉列表而不是下拉列表的切换。这不会起作用，因为下拉切换是具有:hover伪类的触发器，因此您必须扩展此项的可扩展区域（使用填充）以覆盖触发器和触发器之间的间隙下拉本身。

Answer 2

JJ 的回答对我不起作用。我遇到的问题是下拉切换和下拉菜单之间的差距很小。如果我将光标从菜单项缓慢向下移动到下拉菜单，这会导致下拉菜单消失。

我将此添加到我的 css 中：

.dropdown-menu {
  margin: 0px;
}

Bootstrap下拉悬停问题

2 个答案: