下拉菜单显示不正确

Question

So I've tried to create a drop-down menu according to the W3Schools HTML and CSS guide.

Dropdown inside Navbar

This is my Code,

 ul { position: absolute; top: 200px; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background: rgba(0, 0, 0, 0.6); width: 100%; } li { float: left; font-family: TW Cen MT Regular; font-size: 156.25%; height: 70px; line-height: 70px; width: 12%; } li a, .dropbtn { display: block; color: white; text-align: center; text-decoration: none; } li a:hover, .dropdownmenu:hover .dropbtn { background: black; } li.dropdownmenu { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: red; width: 12%; } .dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { color: #00fff6; } .dropdownmenu:hover .dropdown-content { display: block; } 

 <ul> <li id="About"><a href="About.html">ABOUT</a></li> <li id="Ongoing"><a href="NOTSET.html">NOTSET</a></li> <li id="Completed" class="dropdownmenu"> <a href="javascript:void(0)" class="dropbtn">COMPLETED</a> <div class="dropdown-content"> <a href="The Crispy.html">"The Crispy"</a> <a href="New Project.html">New Project</a> </div> </li> <li id="BuildLog"><a href="BuildLog.html">BUILD LOGS</a></li> <li id="Contact"><a href="Contact.html">CONTACT</a></li> </ul> 

and it looks like this currently, the problem is as you see the drop-down content doesn't display correctly when im hovering. you can see the very little red on the bottom of the completed section.

website

Answer 1

We tell many people W3School is bad to learn. This is the best example. There are many good snippets you can find in Google .

To fix your issue,

Remove overflow: hidden from ul style

 ul { position: absolute; top: 200px; list-style-type: none; margin: 0; padding: 0; /*overflow: hidden*/ background: rgba(0, 0, 0, 0.6); width: 100%; } li { float: left; font-family: TW Cen MT Regular; font-size: 156.25%; height: 70px; line-height: 70px; width: 12%; } li a, .dropbtn { display: block; color: white; text-align: center; text-decoration: none; } li a:hover, .dropdownmenu:hover .dropbtn { background: black; } li.dropdownmenu { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: red; width: 12%; } .dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { color: #00fff6; } .dropdownmenu:hover .dropdown-content { display: block; } 

 <ul> <li id="About"><a href="About.html">ABOUT</a></li> <li id="Ongoing"><a href="NOTSET.html">NOTSET</a></li> <li id="Completed" class="dropdownmenu"> <a href="javascript:void(0)" class="dropbtn">COMPLETED</a> <div class="dropdown-content"> <a href="The Crispy.html">"The Crispy"</a> <a href="New Project.html">New Project</a> </div> </li> <li id="BuildLog"><a href="BuildLog.html">BUILD LOGS</a></li> <li id="Contact"><a href="Contact.html">CONTACT</a></li> </ul> 

Answer 2

Just remove overflow hidden from ul css and it will works fine.

ul {
  position: absolute;
  top: 200px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*overflow: hidden*/
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
}