Galerie

Tipps zum Anlegen von Untermenüs mit CSS - CSS-Attribut display: Horizontale Menüleiste oben auf der Webseite.

CSS-Attribut display: Horizontale Menüleiste oben auf der Webseite.

Tipp 1: Horizontale Menüleisten

Der Tipp zeigt Ihnen, wie Sie eine Menüleiste horizontal anordnen.


Für kaskadierende Menüs mit wenigen überschaubaren Kategorien eignet sich meist eine horizontale Anordnung oben auf der Webseite. Die einzelnen Menüpunkte klappen dann nach unten auf, wenn der Benutzer mit dem Mauszeiger über eine Kategorie fährt. Wenn die einzelnen Menüpunkte unterschiedlich breit sein dürfen, erreichen Sie eine horizontale Anordnung ganz einfach, indem Sie nur das CSS-display-Attribut mit dem Wert inline auf die Listenpunkte anwenden.

.menu li {
display: inline;
...
}

Beachten Sie, dass den inline-Elementen keine Breite zugewiesen werden darf. Diese passt sich automatisch dem Inhalt an, hier also dem enthaltenen Text. Daher ist es wichtig, alle Angaben zu width wegzulassen. Das gilt hier sowohl für die einzelnen Listenpunkte als auch für die integrierten Anchor-Elemente. Andernfalls würde die Menüleiste nach wie vor vertikal dargestellt. Mit der CSS-Eigenschaft text-align zentrieren Sie die Menüleiste.

.menu {
text-align: center;
...
}

Die beliebtesten Bildergalerien
Galerie
Videos freischalten
Solange YouTube und die GEMA sich streiten, schauen deutsche Musikfreunde in die Röhre. Mit den Tipps in der Galerie lässt sich die YouTube-Sperre…
Galerie
Top 10
WLAN-Router dienen als Zentrale für Internet und WLAN. Wir zeigen Ihnen die zehn Geräte, die im Test am besten abgeschnitten haben.
Galerie
God Mode, Virtual Desktops , Startmenü & Co.
Wir verraten 20 Tipps und Tricks für Windows 10: Damit haben Sie das neue Microsoft-Betriebssystem zum Release direkt im Griff.
Weitere Bildergalerien entdecken
Einen chronologischen Überblick über alle bisherigen Bildergalerien finden Sie in unserem Archiv-Bereich. Entdecken Sie unsere faszinierende Bilder!