# Drop-Down-Menüs mit CSS

Startseite Seite 2 Seite 2a Zum Formular

## Das Prinzip

Wir verwenden eine Kombination aus der Pseudoklasse ":hover" und der css-Eigenschaft "display" - schau beim Link auf "Seite 2"...
`<style type="text/css">
.navi a span {display:none;}
.navi a:hover span {display:inline;}
</style>
`
In diesem Beispiel wird das Element "span" zunächst nicht angezeigt, beim Mouse-Over des darumliegenden Elements (<a>) wird mit "display:inline (oder block oder inline-block)" das span-Element jedoch angezeigt.

## Das Problem

Leider (oder zum Glück) sind verschachtelte Links der Form <a ...>...<a ...>...</a></a> nicht erlaubt!
Außerdem soll ein Untermenü ja nicht das Layout zerreißen und die Anzeige zappeln lassen, sondern sich schön über die bereits vorhandenen Elemente legen.
Auch die Positionierung der Untermenüpunkte wäre da sehr trickreich und aufwändig...
Für die Barrierefreiheit gerne gesehen und relativ einleuchtend sind Menü-Strukturen als (unsortierte) Liste, so wie in einem ganz normalen Inhaltsverzeichnis.
Prima, das nehmen wir!
Denn auch Listenelemente <li> kennen die Pseudoklasse :hover ...

###### Impressum | Kontakt | Sitemap