SO (!) macht man das nicht.
Erst einmal muss die Navigation in eine Liste, da es eine Aufzählung ist.
Ungefähr so:
Code:
<ul id="navi">
<li><a href="grosse-zaubershow.php" class="navi">Große Zaubershow</a></li>
<li><a href="kinder-zaubershow.php" class="navi">Kinder Zaubershow</a> </li>
</ul>
Jetzt fügst du den Text ein, der beim "Über-den-Link-fahren" kurz "a:hover" angezeigt wird.
Code:
<ul>
<li>
<a href="grosse-zaubershow.php" class="navi">
<span>Für Kinder von 8 bis 99 Jahren.</span>
Große Zaubershow</a></li>
<li>
<a href="kinder-zaubershow.php" class="navi">
<span>Für Kinder von 3 bis 10 jahren</span>
Kinder Zaubershow</a> </li>
</ul>
Nun musst noch das Aussehen in CSS bestimmen und ganz wichtig den "span" verstecken, wenn man nicht über den Link fährt.
Sieht dann so in der CSS Datei aus:
Code:
ul#navi li a span {display:none;} /* Ohne "hover" ist "span" ausgeblendet */
ul#navi li a:hover span {display:block;
width: 400px;
} /* Bei "a:hover" wird es eingeblendet. */
Am einfachsten kannst du den "span" dann per position:absolute relativ zum Elternelement positionieren, dieses muss dann "position:relative" besitzen. Dazu mehr:
Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : POSITION }