Problem mit Ebenen und active

**Kayne** · 25.04.2011, 20:43

Hallo,

ich werkel da jetzt schon eine Weile herum, aber komme nicht auf die Lösung... bestimmt ist es gar nicht so schwer.

Also ich habe folgendes Menü:

Soweit in Ordnung... auch hover ist ok...

Aber wenn man ein Unterpunkt anwählt, kommt das hier:

Natürlich soll es so aussehen wie bei a:hover

Das Problem ist nur, dass anscheinend die Regeln von der ersten und zweiten Ebene gleichzeitig angewandt werden und ich weiß nicht, wie ich das entwirren kann.

Hier der Code:

Code:

#subnav ul li{
    width:200px;
}

#subnav ul li a:before{
	content: "→";
	margin-right:10px;
}


#subnav ul li a {
    display: block;
    padding: 10px 0px 10px 15px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    color: #8C8B8A;
    text-decoration: none;
    border-bottom: 1px solid #c4c4c4;
}

#subnav ul li a:hover {
    background-color: #235273;
    color: #FFFFFF;
    text-decoration: none;
}

#subnav ul li ul{
    margin-bottom: 0px;
}

#subnav ul li ul li a {
    padding: 10px 0px 10px 30px;
}

#subnav ul li ul li a:hover {
    background-color: #235273;
    color: #FFFFFF;
    text-decoration: none;
}

#subnav ul li .submenu:before{
	content: "↓";
	margin-right:10px;
}

#subnav ul li .active.submenu:before{
	content: "↓";
	margin-right:10px;
}

#subnav ul li .active:before{
	content: "→";
	margin-right:10px;
}

#subnav ul li .active {
    display: block;
    padding: 10px 0px 10px 15px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
    border-bottom: 1px solid #c4c4c4;
    background-color: #235273;
    color: #FFFFFF;
    text-decoration: none;
}

#subnav ul li ul li .active:before{
	content: ">>";
	margin-right:10px;
}

#subnav ul li ul li .active {
    display: block;
    padding: 10px 0px 10px 30px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
    border-bottom: 1px solid #c4c4c4;
    background-color: #235273;
    color: #FFFFFF;
    text-decoration: none;
}

Das wichtige hier sind die letzten 4 Code-Elemente. Das davor ist nun um zu sehen wie ich das bei a und a:hover gemacht habe... hier ist nämlich die Darstellung in Ordnung.

Ich bin sicher, es gibt Optimierungsbedarf...

Wie kann man das am besten lösen?

**kos** · 25.04.2011, 21:20

Hallo Kayne,

wenn Du den untergeordneten Menüpunkt anwählst, dann erhalten sowohl das übergeordnete <li> als auch das dazugehörige <a> die Klasse .trail.
Mir dieser Klasse lassen sich dann die Menüpunkte formatieren.

Das kannst Du Dir z.B. mit "Firebug" genau ansehen.

Noch eine Anmerkung:
ich würde an Deiner Stelle nicht mit der Pseudoklassen :before arbeiten, denn hier hat der InternetExplorer so seine Darstellungsprobleme. Besser, Du benutzt hier die Eigenschaft background in Verbindung mit einem Bild.

Code:

a.trail{
background: url(tl_files.....bild.png) no-repeat top left transparent;
}

**Kayne** · 25.04.2011, 21:51

Hallo kos,

ich denke ich habe mich da missverständlich ausgedrückt...

Und zwar geht es darum, dass hier in diesem Bild:

Menüpunkt "B" nicht richtig dargestellt wird. Und zwar werden hier wohl die zwei active Regeln vom 1. und 2. Level gleichzeitig angewandt. Ich will aber, dass nur die Regel für Level 2 greift.

Also es so aussehen:

Nur dass eben nicht A, sondern B blau hinterlegt ist.

Danke schon mal...!

**Kayne** · 25.04.2011, 22:50

Nochmal zur Veranschaulichung... wenn ich die active Regel der ersten Ebene "ul li" aus der CSS Datei wegnehme, habe ich das gewünschte Ergebnis für den aktiven Unterpunkt:

Aber dann habe ich eben keine Style-Regel mehr für einen aktiven Punkt der ersten Ebene.