Navigation ausklappbar <html/CSS>?
Hallo,
ich möchte eine Navigation bauen, die wenn man hovert noch Unterpunkte anzeigt. Ich habe es so gemacht und komme leider nicht mehr weiter, wenn sich die Navigation ausklappt soll es ganz oben angezeigt werden. Ich habe einen Button unter der Navigation und als ich es selbst versucht hatte, zeigte es mir das Ausgeklappte hinter dem Button.
HTML:
<header>
<nav>
<ul>
<li><a href="">Hallo</a>
<ul>
<li><a href="">Hallo</a></li>
</ul>
</li>
<li><a href="">Hallo</a>
<ul>
<li><a href="">Hallo</a></li>
<li><a href="">Hallo</a></li>
</ul>
</li>
<li><a href="">Hallo</a></li>
<li><a href="">Hallo</a></li>
<li><a href="">Hallo</a></li>
<li><a href="">Hallo</a></li>
</ul>
</nav>
</header>
CSS:
header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkblue;
height: 1.5cm;
}
header li {
float: left;
}
header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
header li a:hover:not(.active) {
background-color: rgb(195, 251, 255);
color: black;
height: 29px;
font-weight: bolder;
}
header .active {
background-color: #00e1ff;
height: 21px;
height: 29px;
font-weight: bolder;
color: darkblue;
}
Ich hoffe, dass mir irgendjemand helfen
Danke im voraus
Ps.: Das "Hallo" ist ein Platzhalter.
1 Antwort
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML
Du musst auch eine Regel für die Untermenü-Listen definieren und diese auch einblenden bei hover.
header ul ul { display: none; }
header ul li:hover ul { display: block; }
Um die Listen dann auch noch passen zu positionieren kann man mit absoluter Positionierung arbeiten.
header ul li { position: relative;z-index: 10; }
header ul ul { position: absolute;top: 0;left: 0;z-index: 20 }
Hier wird das z.B. näher beschrieben:
https://www.drweb.de/responsive-navigation-css-dropdown-menue/
Woher ich das weiß:Berufserfahrung