Thema: Verschachtelte Navi mit unterschiedlich-farbigen Links

Hi Leute, ich habe ein Problem.

Ich habe eine Navi die ist wie folgt aufgebaut:

HTML-Code:

<ul>
    <li>Link 1 Ebene 1
        <ul>
            <li>weitere Links Ebene 2</li>
        </ul>
    </li>
    <li>Link 2 Ebene 1
        <ul>
            <li>weitere Links Ebene 2</li>
        </ul>
    </li>
    <li>Link 2 Ebene 1
        <ul>
            <li>weitere Links Ebene 2</li>
        </ul>
    </li>
</ul>

Soo. Nun gibt es 3 Parent-Links und darunter kann die Navi bis in eine 3te Ebene verschaltet werden.

Alle Links im inkl. Parent-Link 1 haben einen roten hover-Effekt.
Alle Links im inkl. Parent-Link 2 haben einen blauen hover-Effekt.
Alle Links im inkl. Parent-Link 2 haben einen grünen hover-Effekt.

Nun sollen die Links aber wenn man auf dem jeweiligen Inhalt ist farbig bleiben (immer den hover-Effekt), damit man sieht wo man gerade steht...

Ich bekomme das aber einfach nicht formatiert... Entweder sind dann alle tieferen Links mitformatiert oder oder. Kann mir jemand einen Tipp geben?

Hier ein Ausschnitt des Codes:

HTML-Code:

<ul class="menu">
    <li class="parent item75"><a href="#"><span>Link 1 Ebene 1</span></a></li>
    <li class="parent active item76"><a href="#"><span>Link 2 Ebene 1</span></a>
        <ul><li class="parent item90"><a href="#"><span>Link 1 Ebene 2</span></a></li>
            <li class="parent active item160"><a href="#"><span>Link 2 Ebene 2</span></a>
                <ul><li class="item87"><a href="#"><span>Link 1 Ebene 3</span></a></li>
                    <li class="item88"><a href="#"><span>Link 2 Ebene 3</span></a></li>
                    <li id="current" class="active item161"><a href="#"><span>Link 3 Ebene 3</span></a></li>
                    <li class="item91"><a href="#"><span>Link 3 Ebene 3</a></li>
					...
                </ul>
            </li>
            <li class="parent item166"><a href="#"><span>Link 3 Ebene 2</span></a></li>
        </ul>
    </li>
    <li class="parent item119"><a href="#"><span>Link 3 Ebene 1</span></a></li>
</ul>

Bitte um Hilfe!

Grüße
sun

Hallo Axel,

danke für die Rückmeldung.

An der index.php wollte ich doch garnichts machen ;-) Sondern natürlich über css.
Nur bekomme ich das einfach nicht hin, selbst mit Firebug etc. Diese Tools benutze ich ja.

Der Quellcode-Ausschnitt, den ich gepostet habe, ist ja direkt von der Website... Was müsste ich jetzt da also tun?

Ich schick dir mal ne Nachricht.

Grüße

Hallo Axel, das ist natürlich verständlich.

Ich hatte nur gehofft, dass du mir vielleicht einen Tipp geben kannst, solange es dich nicht zuviel Zeit kosten würde.
Mir fehlt wahrscheinlich nur ein kleiner Anstoß und wie gesagt, die CSS Klassen via. Firebug habe ich bereits ausgelesen, nur komme ich nicht auf die Lösung diese richtig zu formatieren.

Grüße

Hallo Axel,

dein Satz "auf die richtige Verschachtelung aber achten" trifft es genau auf den Punkt.

Ich komme mit der Verschachtelung nicht klar... Ich habe es nun geschafft, die jeweilst tiefste Ebene des Menüs richtig zu formatieren,
aber sobald ich an die höheren Ebenen gehe, werden alle tieferen automatisch mitformatiert und hier komme ich einfach nicht weiter. Kann man die Navigation auch einfacher aufbauen bzw. verschachteln?

Hiermit funktioniert bereits die unterste Ebene. Aber um in diese Ebene zu gelangen, müssen vorher 2 Links geklickt werden (damit die Navigation aufklappt) und diese beiden Links sollten dann auch noch farbig hervorgehoben sein. Und sobald ich versuche diese zu formatieren, werden alle tieferen Ebenen automatisch mitformatiert.

Code:

		.moduletable-leftnavi .item119 span {
			color:#666;
		}	
		
		.moduletable-leftnavi .item119 span:hover {
			color:#e46d0a;
		}		
		
		.moduletable-leftnavi .item120 li.active span { color:#e46d0a; }
		
		.moduletable-leftnavi .item77 li.active span { color:#e46d0a; }

		.moduletable-leftnavi .item121 li.active span { color:#e46d0a; }

Danke für deine Geduld.

Tobias