Barrierefreie Navigation

Verschachtelte Liste
(Schritt 3 von 10)

Bitte verwenden Sie die Zurück-Funktion Ihres Browsers (Alt + linke Pfeiltaste), um die vorherige Seite wieder aufzurufen.
Oder drücken Sie Alt + F4 um das Fenster zu schliessen.

Die Erläuterungen finden Sie in Struktureller Aufbau einer Navigationsleiste aus dem Beitrag "Das Rückgrat des Webauftrittes: Die Navigation".

Der HTML-Code

<div id="hauptnavigation">
<ul>
<li><a href="eintrag1.html">Eintrag 1</a></li>
<li class="aktiv">
<a href="eintrag2.html">Eintrag 2</a>
<ul>
<li><a href="eintrag2a.html">Eintrag 2 A</a></li>
<li><a href="eintrag2b.html">Eintrag 2 B</a></li>
</ul>
</li>
<li><a href="eintrag3.html">Eintrag 3</a></li>
</ul>
</div>


Die CSS-Deklarationen

#hauptnavigation ul li ul li {
font-weight: normal;
border-top: 1px solid #A9B0D7;
border-bottom: 0 solid #A9B0D7;
}

#hauptnavigation ul li ul li a {
padding: 6px 14px;
}


Download

Ein komplettes Beispiel einer Navigation (3 Haupteinträge mit jeweils zwei Unterpunkten) samt CSS und Grafiken können Sie als ZIP-Datei herunterladen. (10 KB).