HTML5-Tag-Dropdown-Menü

Ich arbeite an einem HTML5-dorphdown-Menü zum Spaß. Ich habe auf W3Schools über ein Dropdown-Menü gelesen, aber alle verwenden CSS-Klassen und IDs.HTML5-Tag-Dropdown-Menü

der HTML-Code ist:

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Super cool drop down menu</title> 
    <link rel="stylesheet" href="style.css" /> 
</head> 
<body> 
    <nav> 
     <ul> 
      <li><a href="#Home">Home</a></li> 
      <li> 
       <a href="#">Super cool drop down menu!</a> 
       <ul> 
        <li><a href="#Link1">Link 1</a> 
        <li><a href="#Link2">Link 2</a> 
        <li><a href="#Link3">Link 3</a> 
       </ul> 
      </li> 
      <li><a href="#Contact">Contact</a></li> 
     </ul> 
    </nav> 


    <h3>Super cool dropdown menu</h3> 
    <p>Ga met je muis op Super cool dorp down menu! staan om de linkjes te tonen.</p> 
</body> 
</html>

die style.css hat den folgenden Code:

nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

nav ul li { 
    float: left; 
} 

nav ul li a { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

nav ul li a:hover, nav ul li ul li { 
    background-color: #f1f1f1; 
    display: block; 
} 

nav ul li ul { 
    display: inline-block; 
} 

nav ul li ul li { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

nav ul li ul li a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
}

Ich glaube, ich habe es fast funktioniert, aber es zeigt nicht die zweit ul li Elemente . Kann mir jemand sagen, was ich falsch mache?

Quelle

2016-11-20 StuiterSlurf

Das Hauptproblem ist, dass Sie die verschachtelten Listenelemente auf "display: none" setzen.

nav ul li ul li { 
    display: none; 
    ... 
}

Wenn Sie wollen, dass sie angezeigt werden, wenn das übergeordnete Element li Verwendung so etwas wie das folgende CSS schwebte ist:

nav ul li:hover ul li { 
    display: block; 
    ... 
}

Ich habe einen jsfiddle mit ihm zu spielen um:

https://jsfiddle.net/1zq1s9ea/

Es gab möglicherweise noch ein paar kleinere Änderungen, die ich vorgenommen habe, wie das Schließen aller "li" -Tags, aber das, was Sie brauchten, war das oben erwähnte.

Quelle

2016-11-20 17:52:30 pulekies

Vielen Dank Kumpel! – StuiterSlurf

Ich habe noch eine Frage. Mein Code zeigt das letzte Listenelement an. Es zeigt die Liste nicht richtig an. Weißt du, was ich falsch mache? https://jsfiddle.net/1zq1s9ea/2/ – StuiterSlurf

Sie positionieren alle Listenelemente in diesem Menü absolut, so dass sie alle oben auf dem Menü erscheinen. Versuchen Sie stattdessen, die ul absolut zu positionieren und die li-Elemente relativ zu ihrem übergeordneten Element zu positionieren. https://jsfiddle.net/1zq1s9ea/3/ Die Art und Weise, in der ich das Problem untersucht habe, war die Verwendung der Chrome-Entwicklertools (f12 drücken, wenn die Website in Chrome geöffnet ist). Sie können die Elemente auf der Seite überprüfen und alle Positionen der Elemente (sogar unsichtbare) sehen und welche CSS auf sie angewendet wird. – pulekies

HTML5-Tag-Dropdown-Menü

Antwort

Verwandte Themen