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

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> 

您可能还想读一读为什么从此问题中将在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 。

就窗口大小而言，您将需要针对仅css解决方案使用媒体查询 。 有关媒体查询以及它们如何工作的信息很多，您将需要弄清楚哪种方法适用于您的应用程序。 这是它可能看起来的示例：

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

注意：

如果您将网站设计为在小屏幕（如触摸屏设备）上查看，则不会发生这些设备的hover事件， hover实际上是on click或on focus 。 因此，请注意在移动设备上使用悬停和进行设计。