Problem mit Menü (bzgl. "position: fixed")

[JPL]

Aloha

Ja, stimmt. Ging mir aber vor etwa nem halben Jahr genauso. Ich war bis dato etwas abstinent und wurde dann von den Möglichkeiten von CSS3 erschlagen :D

...genau so geht es mir gerade.
Ich habe dein Menü optisch jetzt so gestaltet, wie ich auf meiner Seite haben will.

  
<ul>  
    <li id=\"karriere\">Karriere  
          <ul class=\"untermenue1\">  
               <li class=\"untermenue1eintrag\">Studium</li>  
               <li class=\"untermenue1eintrag\">Promotion  
                     <ul class=\"untermenue2\">  
                        <li class=\"untermenue2eintrag\">Promotionsvortrag</li>  
                        <li class=\"untermenue2eintrag\">Doktorprüfung</li>  
                     </ul>  
               </li>  
          </ul>  
    </li>  
</ul>  

Hierbei hat die oberste Ebene eine dunkle Farbe, die folgende Ebene eine hellere, die innerste Ebene die hellste Hintergrundfarbe. Da jeder Listeneintrag normal ja etwas eingerückt wird, habe ich im CSS das "padding" der ULs ausgeschaltet, damit jeder Menüpunkt, egal in welcher Ebene er sich befindet, über die gesamte Menüspaltenbreite geht. Damit es optisch besser aussieht, gibt es zwischen jedem farbigen Eintrag einen schwarzen Rahmen.

Jeder Menütext ist von einem <SPAN> umgeben, dass je nach Ebene entsprechend eingerückt wird, habe ich jetzt nicht reinkopiert, ist ja trivial ;).

Ich habe deshalb für jedes <LI>-Element ebenenweise eine Klasse definiert, wobei das "oberste" Li eine ID bekommen hat.

Mein CSS sieht so aus:

nav ul ul {  
max-height:0vh;  
overflow:hidden;  
transition:max-height 1s;  
}  
  
#karriere {  
    margin: 0px 0px 0px 0px;  
    padding: 0px 0px 0px 0px;  
    background: #444444;  
    }  
  
    .untermenue1 {  
    background: #999999;  
    }  
  
        .untermenue1eintrag {  
        margin: 0px 0px 0px 0px;  
        padding: 0px 0px 0px 0px;  
        }  
  
    .untermenue2 {  
    background: #cccccc;  
    margin: 0px 0px 0px 0px;  
    }  
  
        .untermenue2eintrag {  
        margin: 0px 0px 0px 0px;  
        padding: 0px 0px 0px 0px;  
        }

So sieht es dann auf der Seite aus:

Schnappschuss

Was ich jetzt schon den ganzen Tag versuche und inzwischen am verzweifeln bin: mit
":hover" die Hintergrundfarbe jeweils nur der Zeile, über der die Maus fährt, umzufärben.

    .untermenue2eintrag:hover {  
    background: #aaff44;  
    }  

Solange ich einen :hover nur in der untersten Untermenüebene definiere, klappt das innerhalb dieser Ebene auch hervorragend:

Schnappschuss2

Sobald ich aber einen :hover auch in der darüberliegenden Ebene definiere:

   .untermenue1eintrag:hover {  
    background: #ffff44;  
    }

dann wird der entsprechende Eintrag natürlich verfärbt wenn die Maus darüber färbt (wie es sein soll) - aber er wird eben auch verfärbt, wenn die Maus über einen dazu gehörigen Untermenüeintrag fährt. Soweit ja auch verständlich, denn des Untermenü befindet sich ja innerhalb des <LI>-Elements, das umgefärbt werden soll.

Nur - wie bekomme das weg?
Es soll ja wirklich nur die Menüzeile umgefärbt werden, über der der Mauszeiger ist?

Folgendes Bild zeigt, wie umgefärbt wird, wenn die Maus über dem untersten Eintrag "Doktorprüfung" ist - es wird auch der übergeordnete Eintrag "Promotion" umgefärbt:

Schnappschuss3

Ich werde echt wahnsinnig :D - ich versuche schon den ganzen Morgen mit eingefügten <span>-Elementen das Umfärben vom gesamten <LI>-Eintrag zu umgehen... aber das Resultat ist immer das gleiche...

Fällt dir dazu ein Trick ein?
:)

MfG,