"h2 ul.Menue li:hover > h1" klappt nicht

[Enrico]

Hallo,

ich versuche gerade, mein Drop-Down-Menü von unnötigem Javascript-Code zu "befreien" und rein über CSS zu realisieren.

Javascript war bisher notwendig, um meinem übergeordneten Menüpunkten eine andere Klasse zuzuweisen, sobald ich mich
über einem Menüpunkt aus einem Untermenü befunden habe.

Ich habe im Internet etwas sehr interessantes gefunden, konnte es aber leider bislang nicht auf mein Menü umsetzen:

http://jeremyjarratt.com/2008/09/16/css-tricks-styling-parent-elements-with-hover/
   http://jeremyjarratt.com/wp-content/uploads/2008/09/parent-highlighting-with-hover.html (Demo)

Dies entspricht genau meinem Vorhaben:

-Ich habe eine Grafik als Oberpunkt
   -Bei MouseOver ändert sich die Grafik (realisiert über "hover")
   -Bei MouseOver über einem Unterpunkt soll die Grafik des Oberpunktes wie bei MouseOver bleiben und  nicht wieder auf
    ihren Ursprungszustand zurückgesetzt werden ("hover" ist ja aufgehoben, da ich mich nicht mehr über der Grafik befinde)

Und hier hänge ich...

<h1 class="Auswahlliste_Anfangsbuchstabe"></h1>
   <h2 class="Auswahlliste_Anfangsbuchstabe_Optionen">
      <ul class="Menue">
         <li>aaaaaa</li>
         <li>bb</li>
         <li>cccc</li>
      </ul>
   </h2>

h1,
   h2,
   h3,
   h4,
   h5
   {
      padding:0px;
      margin:0px;
      width:auto;
   }

h1.Auswahlliste_Anfangsbuchstabe
   {
      background: url(../../GRAFIKEN/SCHALTFLAECHEN/Anfangsbuchstabe_0.png) no-repeat;
   }

h1.Auswahlliste_Anfangsbuchstabe:hover
   {
      background: url(../../GRAFIKEN/SCHALTFLAECHEN/Anfangsbuchstabe_1.png) no-repeat;
   }

h2 ul.Menue li:hover > h1
   {
      background: url(../../GRAFIKEN/SCHALTFLAECHEN/Anfangsbuchstabe_1.png) no-repeat;
   }

Wisst ihr Rat, warum das nicht funktioniert?

Ich habe es auch schon mit dem "div"-Tag probiert, klappt aber leider ebensowenig.

Vielen Dank und Gruß
Enrico