Twitter引导菜单下拉菜单，高度问题，悬停答案

【问题标题】：Twitter bootstrap Menu Dropdown, height issue, on hoverTwitter引导菜单下拉菜单，高度问题，悬停
【发布时间】：2016-06-13 12:22:14
【问题描述】：

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

这里是code pen link

HTML 代码：

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

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

【问题讨论】：

navbar 有max-height:340px.. 和.navbar-collapse-in 有overflow-y:auto 使它滚动.. How about this?

标签： twitter-bootstrap drop-down-menu mouseover

【解决方案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>

【讨论】：