如何使用粘性導航欄格式化下拉菜單（無 jQuery）

Question

我正在嘗試建立一個帶有粘性導航欄的個人網站，該網站在某些項目下還有一個下拉菜單。 導航欄“粘住”，但不會出現下拉菜單。 我發現問題圍繞將下拉內容的位置設置為絕對位置以及將“導航欄”創建為隱藏的 ul 溢出。 （PS 我對 CSS 比較陌生，所以我提前道歉）。

到目前為止，我已經嘗試將下拉內容的位置更改為“固定”，但這只能在您向下滾動之前正常工作。 一旦你向下滾動（按方面），它會保持相同的向下距離，並且不會調整到導航欄的新位置。 此外，我已將導航欄的溢出更改為可見。 下拉菜單正常工作，但導航欄的格式完全混亂。 從本質上講，所有這些變化都使問題“更好”，但只會產生新的問題。

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: -webkit-sticky; /* Safari */ position: sticky; width: 100%; top: 0px; } li { float: left; } li a, .dropbtn { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: rgb(228, 40, 40); } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; }

 <header> <h1><a id="myNameTop" href="/">JK</a></h1> </header> <ul> <li class="nav-item"><a class="nav-link" href="/resume">Resumé</a></li> <li class="dropdown nav-item"> <a class="dropbtn" href="/code">Code</a> <div class="dropdown-content"> <a href="/gitHub">GitHub</a> <a href="/javaScriptProjects">Embeded JavaScript Projects</a> </div> </li> <li class="nav-item"><a class="nav-link" href="/graphicDesign">Graphic Design</a></li> <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li> </ul>

目前，我將鼠標懸停在導航欄項目上，並且下拉項目根本沒有下降（無論我是否滾動）。

我想在懸停時看到下拉菜單。

Answer 1

問題是你隱藏了ul的overflow 。

你添加了overflow: hidden到<ul>以便它的背景擴展到所有它的<li> s下，因為<li> s有float:left ，沒有特別的原因。

我建議在<li>使用display:inline-block或在其父級上使用display:flex來“浮動”。 而且，顯然，刪除有問題的overflow:hidden 。

 ul { list-style-type: none; margin: 0; padding: 0; /* overflow: hidden; */ background-color: #333; position: -webkit-sticky; /* Safari */ position: sticky; width: 100%; top: 0px; } li { /* float: left; */ display: inline-block; } li a, .dropbtn { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: rgb(228, 40, 40); } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } body { margin: 0; min-height: 200vh; }

 <header> <h1><a id="myNameTop" href="/">JK</a></h1> </header> <ul> <li class="nav-item"><a class="nav-link" href="/resume">Resumé</a></li> <li class="dropdown nav-item"> <a class="dropbtn" href="/code">Code</a> <div class="dropdown-content"> <a href="/gitHub">GitHub</a> <a href="/javaScriptProjects">Embeded JavaScript Projects</a> </div> </li> <li class="nav-item"><a class="nav-link" href="/graphicDesign">Graphic Design</a></li> <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li> </ul>