Schönen guten Tag zusammen
Ich habe als Subnavigation eine Liste (<ul>). Die einzelnen List-Items in der Liste können aber weitere Unterlisten haben (also eine verschachtelte ul).
Es ist möglich, dass ein List-Item keine, eine oder mehrere Unterlisten hat. Jede weitere Unterliste kann wiederum eine keine oder mehrere Unterlisten habe... Klar soweit?
Als Beispiel hier eine Liste mit 3 "Ebenen":
HTML-Code:
<div id="subnav">
<h1>Subnavigation</h1>
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a>
<ul>
<li><a href="#">Unterliste 1</a></li>
<li><a href="#">Unterliste 11</a></li>
</ul>
</li>
<li><a href="#">Dolores</a>
<ul>
<li><a href="#">Unterliste 2</a></li>
<li><a href="#">Unterliste 22</a>
<ul>
<li><a href="#">Unterliste 3</a></li>
<li><a href="#">Unterliste 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Amet</a></li>
</ul>
</div>
Jetzt möchte ich diese mittels CSS so formatieren, dass jede weitere "Unterebene" weiter eingerückt wird, und das bei unendlich vielen möglichen Ebenen.
Mein Ansatz war folgender:
HTML-Code:
#subnav li ul a
{
padding-left: 0.5em;
}
Dieser wird jedoch nur auf die erste Unterebene angewandt...
Wisst Ihr, wie das im CSS aussehen muss?
Bitte fragt nach, wenn ich mich unklar ausgedrückt habe. Ich hoffe Ihr kommt draus, was ich meine...
Gruss Flubber