Site-Navigation mit Listen, Beispiel 24

Das Style-Sheet sieht so aus:

body {
   font-size: 15px;
   color: #e800e8;
   background-color: #000;
   padding: 0;
   margin: 0;
   }

#maincontent {
   color: #fff;
   background-color: #000;
   padding: 3em 1em 1em;
   border-left: 2px solid #999;
   margin: 0 0 0 174px;
   }

#maincontent:hover {
   border-left: 2px solid #0af;
   color: #ffedcd;
   }

#navigation {
   background-color: transparent;
   position: absolute;
   top: 7px;
   left: 7px;
   }

#navigation LI {
   background-color: transparent;
   padding: 0;
   margin: 0;
   list-style: none;
   width: 160px;
   }

#navigation UL {
   background-color: transparent;
   padding: 0;
   margin: 0;
   }

#navigation A {
   font: bold 1em sans-serif;
   text-decoration: none;
   display: block;
   padding: 3px 5px;
   margin: 1px 0 0;
   width: 148px;
   border-radius: 5px;
   -moz-border-radius: 5px;
   }

#navigation A:link, #navigation A:visited {
   color: #cdedff;
   background-color: #004e80;
   padding: 3px 4px;
   border: 1px solid #0af;
   }

#navigation A:hover, #navigation A:focus {
   color: #ffedcd;
   background-color: #804e00;
   padding: 3px 4px;
   border: 1px solid #fa0;
   }

#navigation A:link span, #navigation A:visited span {
   display: none;
   }

#navigation A:hover span, #navigation A:focus span {
   font-size: 1.5em;
   line-height: 1.5em;
   color: #804e00;
   background-color: #000;
   padding: 0.5em;
   border-left: 2px solid #fa0;
   margin: 0 0 0 174px;
   height: 1em;
   width: 660px;
   display: block;
   position: absolute;
   top: -7px;
   left: -7px;
   }

Das HTML der Seite sieht so aus:

<html>
<head></head>
<body>

<div id="navigation">
<ul>
<li><a title="Grundlagen" href="#">Grundlagen
    <span>Grundlegendes und wichtige Konzepte</span>
    </a></li>
<li><a title="Referenz" href="#">Referenz
    <span>Alle Eigenschaften in CSS 2 und ihre Werte</span>
    </a></li>
<li><a title="Tutorials" href="#">Tutorials
    <span>Praktische Tips und Erklärungen</span>
    </a></li>
<li><a title="Browsers" href="#">Browsers
    <span>Welcher Browser stellt welche Eigenschaften dar?</span>
    </a></li>
</ul>
</div>

<div id="maincontent"></div>
</body>
</html>