javascript - 为我的导航栏下拉菜单启用滚动条

Question

我为我的网站制作了一个导航栏，在悬停内容上有一些下拉菜单。但是，它们似乎禁用了滚动条，我尝试了很多方法但未能启用滚动条。由于下拉内容很长，我希望滚动条仅在分辨率或窗口尺寸较小时出现。

CSS(不完整，我没有把大部分关于样式的部分):

ul.nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-family: Arial;
  z-index: 5;
}

ul.nav li a:hover:(.active), .dropdown:hover .dropbtn {
  background-color: #760808;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #830303;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 50;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index: 50;
}

<ul class="nav">
  <li><a href="homepage.html">Homepage</a>
  </li>
  <li class="dropdown">
    <a class="active" href="javascript:void(0" class="dropbtn">a</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a><a href="#">Link 2</a>
      <a href="#">Link 3</a></div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0" class="dropbtn">be</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0" class="dropbtn">c</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li><a href="../d.html">d</a></li>
  <li><a href="../e.html">e</a></li>
</ul>

Answer 1

您的 css 和内联 javascript 中似乎存在一些错误:

//JAVASCRIPT
href="javascript:void(0)"

//CSS
ul.nav li a.active:hover{}

根据您提供的代码，我无法真正重现您的问题。但是，对于您面临的问题，您需要查看 css 中的 overflow-y 属性。特别是您希望将该属性设置为 scroll 例如 overflow-y:scroll 为每个您也想添加垂直滚动条的元素。同样，如果您想要水平滚动条，请设置 overflow-x:scroll。

就窗口大小而言，您需要使用 media queries对于仅 css 的解决方案。有很多关于媒体查询及其工作原理的信息，您需要找出适合您的应用程序的方法。这是它可能看起来像的示例:

@media screen and (min-width: 480px) {
    .dropdown-content {
        overflow-y: scroll;
        /* Optionally: "overflow-y: auto;" */
    }
}

注意:

如果您正在设计您的网站以在小屏幕(如触摸屏设备)上查看，则这些设备没有 hover 事件，hover 的效果类似于 on单击 或焦点。因此，请注意使用悬停和为移动设备设计。