Dropdown-Menü wird nicht korrekt angezeigt

Question

Also habe ich versucht, ein Dropdown-Menü nach dem W3Schools HTML- und CSS-Guide zu erstellen.

Dropdown inside Navbar

Das ist mein 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>

und es sieht aus wie dies zur Zeit, das Problem ist, wie Sie in den Dropdown-Inhalte sehen nicht korrekt angezeigt wenn ich schwebe. Sie können das sehr kleine Rot auf der Unterseite des abgeschlossenen Abschnitts sehen.

website

Answer 1

Wir sagen viele Menschen W3School schlecht ist, zu lernen. Dies ist das beste Beispiel. Es gibt viele gute Snippets, die Sie in Google finden können.

Ihr Problem zu beheben,

entfernen overflow: hidden von ul Stil

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

Nur Überlauf von ul CSS versteckt entfernen und es wird funktioniert gut.

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