推特引导菜单下拉菜单，高度问题，悬停

Question

我使用Bootstrap创建导航栏，其内部菜单在鼠标悬停时自动下拉，带有额外的CSS。当我们将屏幕尺寸缩小到移动设备，并将鼠标悬停在带有下拉菜单的项目上时 - 在我的例子中是"产品"，除了下拉菜单之外，还有一个额外的滚动条显示，很少有项目被隐藏。

这是代码笔链接

网页代码：

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
    <a class="navbar-brand" href="#">Brand Name</a></div>
      <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products</a>
        <ul class="dropdown-menu">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
          <li><a href="#">Five</a></li>
          <li><a href="#">Six</a></li>
        </ul>
      </li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</nav>

CSS代码 ：

.dropdown:hover .dropdown-menu {
  display: block;
}

我认为问题出在导航栏的高度上。除了下拉菜单之外，如何摆脱滚动条，看看导航栏在显示下拉菜单时是否可以展开。

Answer 1

只需将规则包装在媒体查询中hover因为首先不会在较小的视口上使用。

工作示例

@media (min-width: 767px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand Name</a>
  </div>
  <!-- Top Navigation -->
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">About Us</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products</a>
        <ul class="dropdown-menu">
          <li><a href="#">One</a>
          </li>
          <li><a href="#">Two</a>
          </li>
          <li><a href="#">Three</a>
          </li>
          <li><a href="#">Four</a>
          </li>
          <li><a href="#">Five</a>
          </li>
          <li><a href="#">Six</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>