Horizontales Menü

Durch die Vorbereitung haben wir ja schon fast ein fertiges horizontales Menü. Wie bei den vertikalen Menüs, ist hier das <a>-Element wieder sehr entscheidend. Wir definieren es wieder als Block, aber diesmal als "inline-block".

Das bedeutet, wir haben die Vorteile des Box-Models (Rahmen, Abstände, etc), aber es nimmt nicht die gesamte Breite ein (sonst hätten wir ein vertikales Menü), sondern es wird nur so breit, wie der Inhalt ist.

Die restlichen Eigenschaften sind verschiedene Abstände und Farben, wie schon bei den vertikalen Menüs.

Versuche einmal selbst einen Mouseover-Effekt einzubauen (siehe vertikale). Zudem ist dieses Menü automatisch responsive, da die Links umbrechen, wenn der Platz nicht reicht. Ob das dann noch schön aussieht, ist eine andere Frage. Aber auch hier kannst Du Dich dann austoben.

Warum hat das Menü die gesamte Breite? <ul> ist von vornherein ein Block-Element, und daran haben wir nichts geändert.

CodeZone

CSS

HTML

Auf Testzone anwenden