Geschachtelte Listen übersichtlich formatieren

[daniel908]

Hallo allerseits,

ich bin mir nicht ganz sicher, ob das eine Anfänger- oder Fortgeschrittenen-Frage sein sollte. Ich habe schon recht viel Erfahrung mit CSS, aber hier stehe ich total auf dem Schlauch, auch wenn's vielleicht ganz einfach ist:

Ich habe eine geschachtelte Liste (ul) mit zwei Ebenen.

Nun möchte ich etwas größere vertikale Abstände jeweils über einem Level-1-Element haben, so daß die Liste dann praktisch so aussieht ("-" ersetzt Einrückung):

Code: Alles auswählen

- Level1a

- Level1b
-- Level2a
-- Level2b

- Level1c


(also daß die unterpunkte zu einem Oberpunkt mit diesem optisch gruppiert sind).
Mein erster Ansatz mit

Code: Alles auswählen

ul {
padding-bottom: 10px;
}


reicht natürlich nicht aus, da er nur die Oberpunkte absetzt, die auch Unterpunkte haben (d.h. ein weiteres <ul> enthalten).

Ein

Code: Alles auswählen

li {
padding-bottom: 10px;
}


fügt wiederum natürlich viel zu viele Abstände ein.

Führe ich eine class="level1" für das alles umfassende <ul> ein und wende darauf an:

Code: Alles auswählen

ul.level1 li {
padding-bottom: 10px;
}


dann wird das padding-bottom auf ALLE <li>s angewendet, nicht nur die im level1.

Bitte um hilfreiche Tipps!

Vielen Dank,
Daniel

[daniel908]

.

[Azra]

Code: Alles auswählen

level1 {
padding-bottom: 10px;
}


[dhx]

Moin,

daniel908:
Ein

Code: Alles auswählen

li {
padding-bottom: 10px;
}

fügt wiederum natürlich viel zu viele Abstände ein.

Das macht nix, ergänze dein CSS um folgende Regel:

Code: Alles auswählen

li li {
padding-bottom: 0;
}

Damit werden die (Innen-)Abstände für die verschachtelte Liste (also die zweite Liste) wieder korrigiert bzw. auf null gesetzt.