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

[Jordaniel]

Danke für eure Vorschläge! Habe ich gleich eingearbeitet. <n> habe ich durch <small> ersetzt und den "hier bin ich" link habe ich entsprechend markiert.

Leider habe ich mein ursprüngliches Problem noch nicht lösen können; dem Text in <small> (z.B. "Kuchen & Torten") kann ich kein link, hover, active etc. zuweisen. Wisst ihr woran es liegt?

Hier noch mal der Link zur Seite:
http://www.kaffeehaus-zeltinger.de/test2/html/fruehstueck.html

Und das entsprechende html und css:

HTML
---------------------------------

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

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

ul#speisenavi small a {
   padding: 0em;
color:#666666;
  }

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

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