CSS: Frage zu Navigationsmenü mit Fokus

Liebe CSS-Kenner,

ich habe auf einem Relaunch relativ gut das Navigationsmenü nachgestaltet bekommen, verzweifele aber an einem letzten Punkt.
Unter www.soundfile-music.de ist die "alte" Homepage. Wenn man die Hauptkategorien auswählt, wird das Menü im Hintergrund schwarz, wenn man auf die Submenüs geht, bleiben diese auch schwarz (bis man etwas anklickt).
Ich versuche dieses seit Stunden unter www.soundfile-music.com nachzubauen, klappt aber nie... Wenn ich in die Submenüs gehe, verliert die Hauptkategorie den schwarzen Hintergrund.
Wo ist die berühmte Nadel im Heuhaufen? Ich habe im alten CSS die Anweisung

Code:

---

#mainmenu li a.mainMenuParentBtnFocused,
#mainmenu li a.trail,
#mainmenu li.active a {background: #222; color: #5a6372;}

---

aber das funktioniert neu eingesetzt scheinbar nicht. Was muss ich wo setzen, damit es funktioniert?

Hallo Jens,

schaus dir mal mit einem Tool wie Firebug oder Inspektor an; das sollte span.active sein.
Früher war es mal nur li.active.

Hallo Thomas,

nein, das span.active ist es nicht. Ich frage mich auch, wie ich mit Firebug Hover-Zustände analysieren kann, wenn deren CSS länger ist als ich im Fenster einsehen kann... Sobald ich den Hover verlasse, stehe ich wieder im Dunkeln. :rolleyes:

Ok, zum Verständnis:

Ich klicke unter Workshops eine Unternavigation an. Dann soll das Wort Workshops auch in orange stehen bleiben?
Das ist dann die Klasse trail.

So richtig verstanden?
Nee, falsch gelesen :)

Hallo Jens,

ich würde mal vermuten, in der .de wird das Ganze über das menu.js (menumatic) gelöst. In Deinem Falle sollte an sich ein hover auf die erste li Ebene im #mainmenu reichen. Ich hänge hier mal eine css Datei rein, mit der gewünschte Effekt funktioniert. Allerdings auf Basis der a Tags innerhalb der Navi und hier fahren die Untermenüs auf (über height-Änderungen der li) und es gibt einen Transparenz-Effekt. Den Schnickschnack müsstest Du ggf. wieder raus nehmen.

HTML-Code:

---

#navi-main {
        clear:both;
        margin:0 1%;
}

#navi-main a {
        color:#000;
        display:block;
}
#navi-main ul.level_1 > li > a, #navi-main ul.level_1 > li > span {
        padding:3px 10px 5px;
        font-family: 'Kotta One', serif;
        font-size:1.2em;
        text-align:center;
        text-shadow:1px 1px 1px #999;
        background-color:#f7f7f7;
        border-top-left-radius:10px;
    border-top-right-radius:10px;
    box-shadow:inset 0 2px 3px -2px #999;
        opacity:.6;
        transition: opacity .5s; /* explorer 10 */
    -webkit-transition: opacity .5s; /* chrome & safari */
    -moz-transition: opacity .5s; /* firefox */
    -o-transition: opacity .5s; /* opera */
}
#navi-main ul.level_1 > li > ul > li > a {
        color:#666;
}
#navi-main ul.level_1 > li > ul > li > a:hover {
        color:#00800F;
        text-shadow:1px 1px 1px #ccc;
}

#navi-main ul.level_1 > li > span {
        display:block;
}
#navi-main ul.level_1 > li:hover > a, #navi-main ul.level_1 > li.active > a, #navi-main ul.level_1 > li.trail > a, #navi-main ul.level_1 > li > span {
        opacity:1;
}

#navi-main ul, #navi-main li {
        padding:0;
    margin:0;
    list-style-type:none;
    min-width:139px;
}
#navi-main ul.level_1 {
        margin:15px 0;
}
#navi-main ul.level_1 > li {
        float:left;
        margin:0 .5px;
}
#navi-main ul.level_1 > li > ul {
    position:absolute;
    opacity:0;
    padding:1px 0;
    font-size:1em;
    box-shadow:2px 2px 5px -2px #999;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    z-index:1000;
}
#navi-main ul.level_1 > li > ul > li {
        height:0;
        white-space: nowrap;
        padding:3px 10px;
        background-color:#f7f7f7;
        border-bottom:1px solid #ccc;
}
#navi-main ul.level_1 > li > ul > li:hover {
        background-color:#fff;
}
#navi-main ul.level_1 > li > ul > li.last {
        border:0;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

---

Grundsätzlich braucht es dafür kein Script mehr und die Navi würde schon funzen, aber sobald im Browser (vornehmlich FF) mehrere Registerkarten auf sind, fängt die Variangte ohne Script an zu hakeln und unrund zu laufen,daher habe ich das Ganze noch mit einem kleinen Script aufgepimpt und nun läuft es eigentlich immer und überall stabil und wie es soll.

HTML-Code:

---

<script>
window.addEvent('domready', function(){

  $('ul-navi-main').getElements('li').addEvents({
    mouseenter: function(){
      this.getElements('ul').set('tween', {
        duration: 150,
        transition: Fx.Transitions.Expo.in // This could have been also 'bounce:out'
      }).tween('opacity', '.9');
      this.getElements('li').set('tween', {
        duration: 250,
        transition: Fx.Transitions.Expo.in // This could have been also 'bounce:out'
      }).tween('height', '20px');
    },
    mouseleave: function(){
      this.getElements('ul').set('tween', {}).tween('opacity', '0');
      this.getElements('li').set('tween', {}).tween('height', '0');
    }
  });

});
</script>

---

Ohne den Ausfahr- und Transparenz-Effekt sollte es aber wie gesagt auch ohne Script funzen.

Hallo Jens,

versuche es mal mit

Code:

---

nav#mainmenu li:hover a {
    background: none repeat scroll 0 0 #222;
}

---

Hallo Karl, fantastisch – das war das Ei des Damokles! :D (© Heinz Erhardt)
Funktioniert bestens, ich hatte zuvor
nav#mainmenu ul li a:hover,
muss man halt einfach "umdrehen"...