Andrea Teren: Aussehen überschreiben

Beitrag lesen

Hi!

mein Problem ist, dass ich ich den Link mit id="aktiv" immer unterstrichen haben möchte, aber den enthaltenen span nicht.
Eine Variante davon ist der zweite Link, der zwar bei hover unterstrichen werden soll, der span aber nicht.

Untenstehender Code tut das leider nicht. Die grelle Rot- bzw. Grünfärbung dienen nur der Illustration dass die Anweisung tatsächlich das erhoffte Element anspricht.

<html>
<head>
  <style type="text/css">
    a:link {color:#000099; text-decoration:none;}
    a:hover {text-decoration:underline;}

#menu a span {display:block; color: #333333;}

/* malt Linktext grau und einen Strich drunter */
    #menu #aktiv{color: #333333; text-decoration:underline;}
    /* färbt zwar den span-Text im Link ein, aber entfernt den Strich nicht */
    #menu #aktiv span {color: #FF0000; text-decoration:none;}
    /* färbt zwar den span-Text im Link bei hover ein, aber entfernt den Strich nicht */
    #menu a:hover span {text-decoration:none; color: #00FF00;}
  </style>
</head>

<body>
<div id="menu">
<a href="eins.html" id="aktiv">eins<span>blablubb</span></a>
<a href="zwei.html">zwei<span>Rhabarber</span></a>
</div>
</body>
</html>

Wie muß das CSS aussehen, damit passiert was ich will?

Tschüss
Andrea