Ich möchte mein Menü Drop-down-Menü

Question

Ich möchte mein Navigationsmenü Dropdown-Menü zu machen. Ich habe verschiedene Wege ausprobiert, aber nichts ist passiert.

Das ist mein HTML-Code:

<ul> 

    <li><a href="index.html">Home</a></li> 

    <li><a href="Countries.html">Geography</a></li> 

    <li><a href="English.html">English</a></li> 

    <li class="icon"> 
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
    </li> 

</ul> 

Und das ist mein CSS-Code:

ul { 
    padding: 15px; 
    margin: -10px; 
    overflow: hidden; 
    list-style-type: none; 
    background-color: #171B29; 
} 

li { 
    float: left; 
} 

li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

li a:hover { 
    background-color: #555; 
} 

li icon { 
    display: none; 
} 

@media screen and (max-width:680px) { 
    ul.topnav li:not(: first-child) { 
    display: none; 
    } 
    ul.topnav li.icon { 
    float: right; 
    display: inline-block; 
    } 
} 

@media screen and (max-width:680px) { 
    ul.topnav.responsive { 
    position: absolute; 
    } 
    ul.topnav.responsive li.icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    ul.topnav.responsive li { 
    float: none; 
    display: inline; 
    } 
    ul.topnav.responsive li a { 
    display: block; 
    text-align: left; 
    } 
} 

Wenn ich versuche, ein Dropdown-Menü zu machen, das gesamte Menü wird sehr schlecht. Ich weiß, dass mein Code sehr schlecht zum Lesen ist, aber ich werde es zu schätzen wissen, wenn jemand eine Lösung hat. Vielen Dank im adva

Answer 1

Sie sollten versuchen, Antwort zu finden auf http://www.w3schools.com/css/css_dropdowns.asp
Webseite haben ziemlich anständig Inhalt und seine leicht verständlich.

Answer 2

Haben Sie auch das JavaScript eingebunden? Sie geben beim Anklicken einen Toggle (myFunction) an, damit Sie auch das JavaScript benötigen.

Natürlich können Sie auch HTML und CSS für Dropdowns verwenden, wie im obigen Beitrag aufgeführt.

Answer 3

Wenn das Problem besteht, dass die Elemente <li> vertikal gestapelt werden sollen, können Sie dies ganz einfach mithilfe von flexbox lösen. Wenn Sie den "Drop-down" -Effekt nur mit HTML & CSS ausführen möchten, müssen Sie außerdem eine Pseudoklasse :hover zu dem Top-Level-Element hinzufügen, von dem das Navigationsmenü abgeleitet wird. In dem Beispiel, auf das ich unten verlinke, habe ich das unter <ul> gemacht. Alternativ dazu verwenden Sie das Ereignis mouseover in JavaScript.

Beachten Sie außerdem, dass der von Ihnen verwendete CSS-Selektorkein gültiger Selektor ist. Es gibt kein aktuelles Symbol Tag in HTML, obwohl viele Leute das <i> Tag als Container für Symbole verwenden.

https://jsfiddle.net/IsenrichO/8t4jhvcs/20/