Site-Navigation mit Listen, Beispiel 19b
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: -1px 0 0 0;
width: 108px;
}
#navigation A.n {
display: none;
}
Das HTML der Seite sieht so aus:
<html>
<head></head>
<body>
<div id="ib"><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>