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

.dropdown-content {
   max-height: 240px; /* or any other value you want */
   overflow-y: auto;
}

但是请注意您当前的href表达式无效。应该是

href="javascript:void(0)"

（您需要关闭括号）。

$('.dropdown').on('mouseenter', function(e){
  $('.dropdown-content', this).show();
}).on('mouseleave', function(e){
  $('.dropdown-content', this).hide();
})

ul.nav {
  display: flex;
}
ul.nav li {
  display: block;
}
ul.nav li a {
  display: block;
  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;
  max-height: 240px;
  overflow-y: auto;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index: 50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <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>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <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>

您可能还想读一读为什么this question中在href中使用javascript是不正确的做法，并且它是可接受的答案。

这是说：返回void(0)是可行的，但是如果您试图在hrefs中使用其他javascript表达式，则可能会忘记上下文是不同的，这将导致细微的错误和意外行为应用。

Answer 2

您的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 click或{{1} }。因此，请注意在移动设备上使用悬停和进行设计。

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

2 个答案: