Site-Navigation mit Listen, Beispiel 19c

Das Style-Sheet sieht so aus:

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

#maincontent {
   background-color: #f6ffff;
   padding: 1em;
   border-left: 1px solid #909;
   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;
   display: inline;
   width: 158px;
   }

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

#navigation A {
   font: bold 1em sans-serif;
   color: #000;
   text-decoration: none;
   display: block;
   padding: 3px 4px;
   border: 1px solid #909;
   margin: 0;
   width: 148px;
   }

#navigation A:link,
#navigation A:visited {
   background-color: #9c9;
   }

#navigation A:hover,
#navigation A:focus {
   background-color: #ded;
   }

#ia #navigation A.ca,
#ib #navigation A.cb,
#ic #navigation A.cc,
#id #navigation A.cd {
   display: block;
   font: normal 0.94em sans-serif;
   padding: 3px 4px 3px 44px;
   border-top: none;
   margin: -5px 0 0 0;
   width: 108px;
   }

#navigation A.n  {
   display: none;
   }

Das HTML der Seite sieht so aus:

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

<div id="ic"><div id="navigation">
<ul>
<li><a title="Grundlagen"
       href="../examples/listnav-19a.html">Grundlagen</a></li>
<li><a class="ca n" title="Fiktiver Link a1"
       href="#">Grundlagen I</a></li>
<li><a class="ca n" title="Fiktiver Link a2"
       href="#">Grundlagen II</a></li>
<li><a class="ca n" title="Fiktiver Link a3"
       href="#">Grundlagen III</a></li>
<li><a class="ca n" title="Fiktiver Link a4"
       href="#">Grundlagen IV</a></li>
</ul><ul>
<li><a title="Referenz"
       href="../examples/listnav-19b.html">Referenz</a></li>
<li><a class="cb n" title="Fiktiver Link b1"
       href="#">Referenz I</a></li>
<li><a class="cb n" title="Fiktiver Link b2"
       href="#">Referenz II</a></li>
</ul><ul>
<li><a title="Tutorials"
       href="../examples/listnav-19c.html">Tutorials</a></li>
<li><a class="cc n" title="Fiktiver Link c1"
       href="#">Tutorials I</a></li>
<li><a class="cc n" title="Fiktiver Link c2"
       href="#">Tutorials II</a></li>
</ul><ul>
<li><a title="Browsers"
       href="../examples/listnav-19d.html">Browsers</a></li>
<li><a class="cd n" title="Fiktiver Link d1"
       href="#">Browsers I</a></li>
<li><a class="cd n" title="Fiktiver Link d1"
       href="#">Browsers II</a></li>
<li><a class="cd n" title="Fiktiver Link d2"
       href="#">Browsers III</a></li>
</ul>
</div></div>

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