Jordaniel: Bei hover soll sich auch Unterelement ändern. Wie funktionierts?

Beitrag lesen

Hallo, um mein Problem darzustellen, erstmal der Link der betroffenen Seite:

http://www.kaffeehaus-zeltinger.de/test2/html/fruehstueck.html

Dort soll sich bei einem mouseover über den Link "Ein Stück Vielfalt –
Kuchen & Torten" nicht nur die Farbe von "Ein Stück Vielfalt" ändern, sondern auch die Farbe von "Kuchen & Torten". Bis jetzt ändert sich bei einem mouseover nur die Farbe von "Ein Stück Vielfalt" von rot zu hellgrau. Ebenso soll sich bei einem Mouseover die Farbe von "Kuchen & Torten" in hellgrau ändern. Leider bekomme ich es nicht hin.

Die jeweils grauen Texte (wie z.B. "Kuchen & Torten") habe ich "n" genannt und per css definiert. Ich weiß nicht, wie man dieses von mir definierte Element in der Fachsprache nennt; ich nenne es hier mal "Unterelement".

Ich habe versucht, "n" schlicht und einfach einen hover zuzuweisen. Das wird vom Browser aber ignoriert.

Getestet habe ich auf FF 3.5.2.

Der Quelltext zu dieser Linkliste sieht so aus:

<ul id="speisenavi">
     <li><a href="fruehstueck.html">Traditionelles <br />und Originelles<br /><n>Frühstück von 9 bis 18 Uhr</n></a></li>
    <li>Ein Stück Vielfalt<br /><n>Kuchen &amp; Torten</n></li>
                <li>Gaumenfreu(n)de <br /><n>Kleine &amp; große Speisen</n></li>    
                <li>Fruchtiges <br />in Kugelform <br /><n>Unsere Eiskarte</n></li>
                <li>Mit Leib und Kehle<br /><n>Kaffee, Tee und andere Getränke</n></li>
        </ul>

Das CSS für die Links sieht so aus:

ul#speisenavi {
font-family: Georgia, serif;
font-size: 14px;
font-weight:bold;
text-align:center;
text-transform:uppercase;
text-decoration: none;
letter-spacing: 2px;
color:#CC0000;
padding-left:20px;
}

ul#speisenavi li {
   display: block;
text-decoration: none;
padding-bottom:20px;
  }

ul#speisenavi a {
   text-decoration: none;
    padding: 0em;
color:#CC0000;
  }

ul#speisenavi a:link, ul#speisenavi a:visited {
color: #CC0000;
}

ul#speisenavi a:focus, ul#speisenavi a:hover, ul#speisenavi a:active
  {
color: #666666;
  }

ul#speisenavi li n {
font-size: 11px;
text-transform:none;
letter-spacing: 0px;
font-style:italic;
text-decoration: none;
padding: 0em;
color: #333333;
  }

ul#speisenavi n a {
   text-decoration: underline;
    padding: 0em;
color:#333333;
  }

ul#speisenavi n a:link, ul#speisenavi n a:visited {
color: #666666;
}

ul#speisenavi n a:focus, ul#speisenavi n a:hover, ul#speisenavi n a:active
  {
color: #666666;
  }

Hoffentlich wisst ihr Rat, ich komme an dieser Stelle nicht weiter. Vielen Dank schon mal im Voraus!