Liste vorbereiten

Egal um welches Menü es sich handeln sollte, so wissen wir doch, dass wir eine Liste verwenden <ul> und in dieser sind unsere Listenpunkte <li> enthalten. Diese widerum beinhalten Links <a>. Davon gehe ich in allen Beispielen aus (<li><a>xxx</a></li>)!

Zunächst müssen wir die Eigenschafte einer Liste ausschalten, da wir diese vollständig selbst gestalten wollen.

  • Listenpunkte entfernen
  • Einrückung entfernen
  • Alles zu inline-Elemente

Hinweis: Erster Bug in CSS. Leider ist immer ein Abstand zwischen den <li>, den wir auch mit margin und padding nicht beheben können. Ein Trick ist es, das HTML hintereinander weg, ohne neue Zeile oder Leerzeichen zu schreiben (...</li><li>...). Dies ist hauptsächlich für horizontale Menüs interessant.

Gehen wir weiterhin davon aus, dass sich die Liste in einem begrenzenden Element befindet, z.B. <nav> oder <div>.

CodeZone

CSS

HTML

Auf Testzone anwenden