Site-Navigation mit Listen, Beispiel 23

Das Style-Sheet sieht so aus:

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

#maincontent {
   background-color: #f9f4eb;
   padding: 1em;
   border-left: 3px double #999;
   margin: 0 0 0 174px;
   }

#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 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: #666;
   padding: 3px 4px;
   border: 1px solid #fa0;
   }

#navigation A:hover, #navigation A:focus {
   color: #333;
   padding: 3px 4px;
   border: 1px solid #850;
   }

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

#navigation A:hover span, #navigation A:focus span {
   font-size: 0.8em;
   color: #333;
   background: transparent;
   width: 9.5em;
   display: block;
   position: absolute;
   top: 10em;
   left: 0.5em;
   }

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 kennt welche Eigenschaften
          und Werte?</span>
    </a></li>
</ul>
</div>

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