Verschachtelte Navigation mit CSS

[Alexander86]

Hallo,
ich versuche gerade eine vertikale Navigation für bis zu 4 Ebenen zu erstellen (siehe Grafik). Das HTML soll später von einem CMS generiert werden. Hier der aktuelle Code:

HTML:

<div id="submenu"> 
<ul> 
<li><a href="">Unternehmen</a></li> 
<li><a href="">Philosophie</a></li> 
<li><a href="">Was wir bieten</a></li> 
<li class="current-item"><a href="">Standorte/Partner</a> 
<ul> 
<li><a href="">Vertrieb</a></li> 
<li class="current-item"><a href="">Service</a></li> 
</ul> 
</li> 
<li><a href="">So finden Sie uns</a></li> 
<li><a href="">Impressum</a></li> 
<li><a href="">Kontakt</a></li> 
</ul> 
</div>

CSS:

#submenu ul { 
margin: 0px; 
padding: 0px; 
list-style-type: none; 
} 

#submenu li { 
margin: 0px; 
} 

#submenu a { 
display: block; 
padding: 3px 0px 3px 25px; 
background-image: url(images/submenu/bullet_1.gif); 
background-repeat: no-repeat; 
background-position: 10px; 
color: #000000; 
text-decoration: none; 
} 

#submenu ul ul a { 
padding-left: 35px; 
background-image: url(images/submenu/bullet_2.gif); 
background-position: 20px; 
} 

#submenu ul ul ul a { 
padding-left: 45px; 
background-image: url(images/submenu/bullet_3.gif); 
background-position: 30px; 
} 

#submenu ul ul ul ul a { 
padding-left: 55px; 
background-image: url(images/submenu/bullet_4.gif); 
background-position: 40px; 
}

Screenshot:


Bis jetzt sind die Ebenen nur eingerückt und haben jeweils ein anderes Icon.

1. Wie kann ich jetzt den aktiven Navigationselementen (current-item) ein anderes Icon und eine andere Hintergrundfarbe zuweisen? Wenn ich z.B.

#submenu .current-item a {background-color: white;}

schreibe, dann werden auch die Unterelemente des aktiven Items gefärbt.

2. Habt ihr irgendwelche Ideen, wie man dieses Menü noch etwas übersichtlicher gestalten könnte? Die Homepage hat nämlich eine sehr verschachtelte Menüstruktur.

Vielen Dank im Voraus.

Gruß Alex

[Boris]

Wie kann ich jetzt den aktiven Navigationselementen

Na indem du dem aktiven Punkt eine Klasse oder ID vergibst (#menuaktiv) und das dann entsprechend gestaltest.

ul ul a#menuaktiv{...}

[Alexander86]

Na indem du dem aktiven Punkt eine Klasse oder ID vergibst (#menuaktiv) und das dann entsprechend gestaltest.

ul ul a#menuaktiv{...}

D.h. ich muss den aktiven a-Elementen eine Klasse zuweisen? Es gibt nämlich schon eine Klasse current-item für die li-Elemente. Kann ich über diese Klasse nicht die aktiven a-Elemente ansprechen?

[Boris]

Nö, kannst du nicht. Woher soll das CSS denn "wissen", welches A Element du meinst?

[Alexander86]

Nö, kannst du nicht. Woher soll das CSS denn "wissen", welches A Element du meinst?

Ich glaube #submenu .current-item>a könnte funktionieren aber das finde ich persönlich nicht so gut. Ich bin mir auch nicht sicher ob das alle Browser interpretieren können.

[Boris]

Ah, wieso machst du es nicht so:

#submenu li.current-item a {background-color: white;}

#submenu li li.current-item a {anders...}

Sprich: 1. Ebene erhält diese und jene Formatierung, die 2. Ebene andere ...

[Alexander86]

Ah, wieso machst du es nicht so:

#submenu li.current-item a {background-color: white;}

#submenu li li.current-item a {anders...}

Sprich: 1. Ebene erhält diese und jene Formatierung, die 2. Ebene andere ...

Aber was schreib ich dann für "anders"? #submenu li li.current-item a sollen ja eigentlich keine Formatierungen haben.

[Boris]

Aber was schreib ich dann für "anders"? #submenu li li.current-item a sollen ja eigentlich keine Formatierungen haben.

Wenn du nicht willst, dass untergeordnete Elemente die Formatierung bekommen, musst du diese wieder zurücksetzen. Sprich, hast du einen Abstand für das Elternteil gesetzt (padding-left: 10px), den du für die Kinderelemente nicht willst, musst du diese zurück nehmen (padding-left: 0).

Vergiss nicht, dass alle Angaben vererbt werden

[Alexander86]

Welche Lösung ist besser? Die current-item-Klasse dem a-Element zuweisen oder die Unterelemente zurücksetzen? Bei 5 Ebenen wird die 2. Variante wohl recht umständlich und aufgebläht.