Navigation verliert Active

[flexx]

Hallo zusammen,

ich habe eine Navigation unterteilt in Hauptmenu im Header (mit Start und Stoplevel auf die erste Ebene beschränkt)

Auf der rechten Seite habe ich dann das Menu vertikal mit den übrigen Unterseiten (mit Start und Stoplevel erste Ebene ausgegrenzt)

Klicke ich jetzt im Hauptmenu (Header) auf einen Menupunkt öffnet sich rechts das Untermenu. Soweit so gut.
Der aktive Haupmenupunkt hat nun den Status Active und farblich markiert.
Klicke ich nun aber auf einen Untermenupunkt der rechten Seite verliert der obergeordnete Menupunkt im Header sein .active ... zumindest zum Teil. Schriftfarbe wird wieder zur normalen Linkfarbe, background-color bleibt allerdings stehen, so dass der Hauptmenupunkt nicht mehr lesbar ist.
Da ich hier vollkommen verzweifle und mir der Fehler einfach nicht auffallen will poste ich hier mal die entscheidenden Teiel der nav.css.

#header .mod_navigation{
right:0;
top:62px;
position:absolute;
text-align:right;}

#header .mod_navigation li{
float:left;
padding:0;
line-height:1;list-style:none;}

#header .mod_navigation a,#header .mod_navigation span{
display:block;
padding:8px 18px 9px;
text-decoration:none;
font-size:12px;
color:#fff;text-transform:uppercase;}

#header .mod_navigation span{cursor:default;}
#header .mod_navigation li.active,#header .mod_navigation li.trail{
border:1px solid #ffff66;
color:#000;background:#ffffaa;}

#header .mod_navigation li:hover{
color:#ffffaa;background:transparent;}

#header .mod_navigation li.active span,#header .mod_navigation li.trail span{
font-weight:bold;
color:#000;background:transparent;}

#header .mod_navigation li:hover span{
font-weight:bold;
color:#000;background:#ffffaa;}

#header .mod_navigation a:hover{
color:#ffff00;}

#right .mod_navigation{
padding-top:0;}

#right .mod_navigation li{
padding:4px;
line-height:1;list-style:none;}

#right .mod_navigation a,#right .mod_navigation span{
display:block;
padding:0 28px 9px 0;
text-decoration:none;
font-size:12px;
color:#000;}

#right .mod_navigation span{cursor:default;}
#right .mod_navigation li:hover,#right .mod_navigation li.active,#right .mod_navigation li.trail{
color:#000;background:transparent;}

#right .mod_navigation li:hover span,#right .mod_navigation li.active span,#right .mod_navigation li.trail span{
font-weight:bold;
color:#000;background:transparent;}

#right .mod_navigation a:hover{
color:#0000aa;}

Ich meine ich hätte zu diesem Thema hier schon einmal etwas gelesen, finde es aber nicht mehr wieder.
Sieht hier irgendjemand den Fehler?

[savi]

Hi!

erstmal bekommt der übergeordnete Menüpunkt die klasse .trail zugewiesen. Damit kannst du den Mneüpunkt dann ansprechen.
Wie du im CSS sieht ist .trail und .activ gleich formatiert nur mit dem unterscheid dass bei .trail dann wieder ein a tag vorhanden ist und der Menüpunkt dementsprechend aussieht. Also musst du auch links innerhalb von .trail eine definition zuweisen..

[flexx]

Puuuuuh. Äh. Wie bitte?

Deine Erklärung verstehe ich nicht wirklich.

Der übergeordnete Menupunkt im Header hat doch die Klasse .trial bereits..

#header .mod_navigation li.active,#header .mod_navigation li.trail{
border:1px solid #ffff66;
color:#000;background:#ffffaa;}

Also active und trail sind natürlich gleich formatiert, da der aktive Menupunkt ja immer gleich aussehen soll. Es soll eine Registeroptik hergestelt werden ähnlich wordpress.org.

Und wo soll ein a tag vorhanden sein? Bei trail??? Sehe ich nicht.
Und was meinst Du mit "links innerhalb von .trail"?

Könntest Du das Ganze vielleicht ein wenig verständlicher für einen Newbie erklären? Vielleicht mit Beispiel?

[flexx]

Ich habe jetzt folgendes versucht und die CSS aus dem Handbuch genommen.
Jetzt ist es genau umgekehrt. Die Darstellung ist falsch wenn man den Hauptmenupunkt anklickt und wird erst richtig wenn ein Untermenu rechts angeklickt wird.
Jetzt verstehe ich gar nix mehr.

Wieso kann die Darstellung des Aktiven Hauptmenupunktes nicht gleich aussehen, egal ob er selbst angeklickt wurde oder schon ein Untermenupunkt, welcher dann ja einen theoretischen zweiten Active hätte.
Genau dafür ist Trail doch da oder habe ich da grundlegend was falsch verstanden?

#header .mod_navigation{
right:0;
top:62px;
position:absolute;
text-align:right;}

#header .mod_navigation a,#header .mod_navigation span{
display:block;
padding:8px 18px 9px;
text-decoration:none;
font-size:12px;
color:#fff;text-transform:uppercase;}

#header .mod_navigation li{
float:left;list-style:none;}

#header .mod_navigation a{
display:block;
padding:8px 18px 9px;
font-weight:bold;
text-decoration:none;
color:#fff;
line-height:1;}

#header .mod_navigation a:hover{
color:#ffffaa;}

#header .mod_navigation a.trail{
color:#333333;background:#ffffaa;}

#header .mod_navigation span{
display:block;
padding:8px 18px 9px;
border-right:1px solid #c6c6c6;
font-weight:bold;
line-height:1;background:#ffffaa;}
* html #header .mod_navigation a,* html #header .mod_navigation span{
padding-top:9px;
padding-bottom:8px;}
*:first-child+html #header .mod_navigation a,*:first-child+html #header .mod_navigation span{
padding-top:9px;
padding-bottom:8px;}

Irgendwie wird Trail auch in keinem Buch was ich habe und nirgendwo im Internet wirklich erklärt.
Weiß niemand Rat?

[BugBuster]

Schau dir das am besten mit Firefox und Firebug Add-On an.

Oder nehme das Template von Nina als Hilfe, auf der Seite
http://free.ena-kundenportal.de/news...scription.html
sieht man, wie die Ebene 1 und 2 per trail und Ebene 3 per activ gesetzt wird.

[savi]

Tut mir leid dass ich es ein wenig umständlich erklärt habe ,-) oder auch falsch...


Ich hab mir jetzt dein CSS nochmal angeschaut und du könntest noch probieren den span tag bei trail zu löschen. Weiß aber nicht genau ob das die Lösung ist.

#header .mod_navigation li.active span,#header .mod_navigation li.trail span{
font-weight:bold;
color:#000;background:transparent;}

vielleicht kommt hier auch noch ein echter CSS profi vorbei und nimmt sich deines Problems an. Leichter wärs natürlich wenn du einen link hättest dann könnte man mit firebug das schnell mal testen..

[flexx]

Tja. Link ist leider nicht, da ich die Menuumstallung ja local teste bevor ich es online stelle.
Mit Firebug bzw. WDK schau ichs mir ja an. Ich komme nur nicht dahinter wo der Fehler sein soll.

Auch auf CSS Hilfeforen gibts nix dazu... Sehr komisch...

[flexx]

Danke BugBuster. Der Tip mit Ninas Seite hat geholfen.
So funktionierts.
Ich habe zwar nicht den Anflug einer Ahnung wie so... aber Hauptsache jetzt klappts.

Um das Warum kümmere ich später, wenn ich wieder Zeit habe...

Vielen Dank.