Site-Navigation mit Listen, Beispiel 18b

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;
   width: 168px;
   }

#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: 2px 0 0 10px;
   width: 148px;
   }

#navigation A:link,
#navigation A:visited {
   background-color: #9c9;
   padding: 3px 4px;
   }

#navigation A:hover,
#navigation A:focus {
   background-color: #ded;
   padding: 3px 4px;
   }

#ia #navigation A.ca,
#ib #navigation A.cb,
#ic #navigation A.cc,
#id #navigation A.cd {
   background-color: #f6ffff;
   padding: 3px 4px 3px 8px;
   border-left: 7px double #909;
   margin: 2px 0 0 0;
   }

Das HTML der Seite sieht so aus:

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

<div id="ib"><div id="navigation">
<ul>
<li><a class="ca" title="Grundlagen"
       href="../examples/listnav-18a.html">Grundlagen</a></li>
<li><a class="cb" title="Referenz"
       href="../examples/listnav-18b.html">Referenz</a></li>
<li><a class="cc" title="Tutorials"
       href="../examples/listnav-18c.html">Tutorials</a></li>
<li><a class="cd" title="Browsers"
       href="../examples/listnav-18d.html">Browsers</a></li>
</ul>
</div></div>

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