CSS-Dropdowns
Navigationsleisten legten Links in eine Zeile. Ein Dropdown fügt ein verschachteltes Panel hinzu, das unter einem Trigger öffnet — meist per Hover, besser auch wenn der Tastaturfokus hineinwandert. Meistere zuerst ein ruhiges CSS-Muster, bevor du riesige Mega-Menüs erfindest.
Ein Dropdown-Werkzeugkasten
📊 Dropdowns auf einen Blick
| Bauteil | Alltagaufgabe |
|---|---|
| Relativer Trigger | Das Eltern-li (oder der Wrapper) wird zum Positionierungsanker |
| Absolutes Panel | Das verschachtelte Menü sitzt unter dem Trigger (top: 100%) |
| Standardmäßig versteckt | display: none oder außerhalb, bis es geöffnet wird |
:hover-Öffnung |
Der Zeiger öffnet das Panel |
:focus-within |
Tastatur Nutzer können das Panel beim Tabben öffnen/offen halten |
z-index |
Hält das offene Panel über dem folgenden Seiteninhalt |
Reine CSS-Dropdowns sind ein Lehrklassiker. Echte Produkte ergänzen oft JS für Klick-Umschalten auf Touch, Escape zum Schließen und reichere Barrierefreiheit — lerne hier zuerst das CSS-Skelett.
Relativer Trigger, verschachtelte Liste
Behalte den Trigger-Link in der oberen Leiste und nest eine zweite Liste für das Untermenü. Das Elternelement muss positioniert sein, damit absolute Kinder ihr Zuhause kennen.
.nav > li {
position: relative;
}
.nav > li > a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
Absolutes Panel unter dem Trigger
Platziere das Untermenü mit position: absolute, pinne es an den unteren Rand des Triggers und gib ihm einen soliden Hintergrund, damit Seitentext nicht durchscheint.
.nav .submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 12rem;
margin: 0;
padding: 0.35rem 0;
list-style: none;
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
Verstecken bis zum Öffnen
Setze das Panel standardmäßig auf geschlossen. Alles auf einmal zu öffnen macht das Dropdown sinnlos.
.nav .submenu {
display: none;
}
Bei Hover zeigen
Wenn der Zeiger auf dem Elternelement ruht, zeige das Panel. Padding am Trigger hilft, versehentliches Schließen am Rand zu vermeiden.
.nav > li:hover > .submenu {
display: block;
}
Lieber auch focus-within
Hover allein lässt Tastatur Nutzer im Stich. :focus-within hält das Panel offen, solange der Fokus im Element ist — ein ruhiges CSS-Upgrade.
.nav > li:hover > .submenu,
.nav > li:focus-within > .submenu {
display: block;
}
Eine ruhige Dropdown-Gewohnheit
Relatives Elternelement, absolutes Panel, standardmäßig versteckt, Hover + focus-within, bescheidener z-index. Klick-Umschalt-Mega-Menüs und komplexe ARIA-Verdrahtung kommen später — verwechsle das nicht mit der flachen Navigationsleisten-Lektion.
.nav .submenu {
z-index: 20;
}
.nav .submenu a {
display: block;
padding: 0.45rem 0.9rem;
text-decoration: none;
color: inherit;
}
Probier es selbst
- Mach jedes Top-Level-
lizuposition: relative. - Neste eine
.submenu-Liste und positioniere sieabsolute; top: 100%; left: 0. - Verstecke mit
display: none, zeige dann beili:hover. - Ergänze
:focus-within, damit Tastaturfokus das Panel ebenfalls öffnet. - Erhöhe
z-indexund notiere, wann du JS für Touch-Klick-Umschalten ergänzen würdest.
Häufige Fehler
- Absolutes Untermenü ohne relatives Elternelement (Panel springt weg)
- Untermenü standardmäßig sichtbar lassen
- Fokusstile entfernen, sodass Tastatur Nutzer den Überblick verlieren
- Ein volles JS-Mega-Menü bauen, bevor du dieses CSS-Skelett beherrschst
- Dropdowns als ganze Seitenlayout-Lektion behandeln
Zusammenfassung
- Dropdowns nesten ein Panel unter einem relativen Trigger
- Absolute +
top: 100%pinnt das Menü unter den Link - Standardmäßig verstecken; mit Hover und focus-within zeigen
- Mit z-index deckt das Panel Seiteninhalt ab
- Flache Navigationsleisten kamen zuerst; verschachtelte Menüs sind diese Lektion
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt