如何使用粘性导航栏格式化下拉菜单（无 jQuery）

Question

I'm trying to build a personal website with a sticky nav bar that also has a drop down menu under some of the items. The nav bar is "sticking" but the drop down menu won't appear. I have found that the issues revolve around setting the position of drop down content to absolute and the overflow of the the ul that creates the "nav bar" to hidden. (PS I'm relatively new to CSS, so I apologize ahead of time).

So far, I have tried changing the position of the drop down content to "fixed," but this only works properly until you scroll down. Once you scroll down (as aspected) it remains the same distance down and does not adjust to the nav bar's new location. In addition, I have changed the nav bar's overflow to visible. The drop down works correctly, but the formatting of the nav bar is completely messed up. Essentially, all of these changes have made the problem "better," but only creates new issues with them.

 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>

Currently, I hover over the nav bar item and the drop down item does not come down at all (no matter if I scrolled or not).

I want to see the drop down menu when I hover.

Answer 1

The problem is you're hiding the overflow of ul .

You added overflow: hidden to the <ul> so that its background extended under all it's <li> s, because the <li> s have float:left , for no particular reason.

I suggest "floating" the <li> s using either display:inline-block on them or display:flex on their parent. And, obviously, removing the offending 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>