為我的導航欄下拉菜單啟用滾動條

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 。 因此，請注意在移動設備上使用懸停和進行設計。