Bootstrap 下拉懸停問題

Question

我的網站上有一個引導默認下拉菜單。 我遇到的問題是我希望下拉菜單在懸停時顯示。 它按預期工作，但有一個小問題。 如果我從箭頭旁邊的任何地方但直接在下拉項目下方繼續，除非我通過下拉箭頭繼續，否則它會消失..它會消失，因此非常不一致。 我怎樣才能讓它變得更好？ 我曾嘗試向下拉項添加填充，但它根本沒有幫助。

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 演示

Answer 1

向.dropdown-toggle項目添加內邊距.dropdown-toggle該問題，因為內邊距是項目可懸停區域的一部分。

這是我添加的代碼：

.dropdown-toggle {
    padding: 10px;
}

鏈接到更新的 JSFiddle 演示

你說你在“下拉項目”中添加了填充，我猜這意味着你試圖將它添加到實際的下拉列表而不是下拉列表的切換。 這不起作用，因為下拉切換是具有:hover偽類的觸發器，因此您必須擴展此項目的可懸停區域（帶填充）以覆蓋觸發器和下拉本身之間的間隙。

Answer 2

JJ 的回答對我不起作用。 我遇到的問題是下拉切換和下拉菜單之間的差距很小。 如果我將光標從菜單項緩慢向下移動到下拉菜單，這會導致下拉菜單消失。

我將此添加到我的 css 中：

.dropdown-menu {
  margin: 0px;
}