Ich will eine horinzontale Navigationsleiste für meine Webseite, die per Click aufklappt.
Ich bin hier schon fündig geworden (zwar vertikal, aber genau so möchte ich das haben), jedoch möchte ich das in der <ul> <li> "Baumstruktur" haben.
Könnte mir jemand erklären was ich ändern muss?
Wäre euch sehr dankbar. :)
Ich bin hier schon fündig geworden (zwar vertikal, aber genau so möchte ich das haben), jedoch möchte ich das in der <ul> <li> "Baumstruktur" haben.
Könnte mir jemand erklären was ich ändern muss?
Wäre euch sehr dankbar. :)
HTML:
<html>
<head>
<meta charset="utf-8">
<title>Navigation</title>
<meta name="description" content="Navigation Sample">
<style>
.hackbox{
display: none;
}
.dropdown-menu{
display: none;
}
label {
color: #0060f6;
cursor: pointer;
}
label:hover {
color: #ffb400;
}
.dropdown div a{
text-decoration: none;
}
.dropdown div a:hover {
color: #ffb400;
}
input[type="checkbox"]:checked ~ .dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<input type="checkbox" class="hackbox" id="ErstesMenü" />
<label class="knopf" data-toggle="dropdown" for="ErstesMenü" >Erstes Menü</label>
<div class="dropdown-menu">
<div><a href="#">Eins</a></div>
<div><a href="#">Zwei</a></div>
<div><a href="#">Drei</a></div>
<div><a href="#">Vier</a></div>
</div>
</div>
<div class="dropdown">
<input type="checkbox" class="hackbox" id="ZweitesMenü" />
<label class="knopf" data-toggle="dropdown" for="ZweitesMenü" >Zweites Menü</label>
<div class="dropdown-menu">
<div><a href="#">Elf</a></div>
<div><a href="#">Zwölf</a></div>
<div><a href="#">Dreizehn</a></div>
<div><a href="#">Vierzehn</a></div>
</div>
</div>
</body>
</html>
