Question

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

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

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>

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

1 个答案: