Das Style-Sheet dieser Seite:
body {
font: 15px sans-serif;
background-color: #fff;
color: #000;
padding: 0;
margin: 0;
}
DIV#sitemap {
padding: 1em 1.5em;
line-height: 22px;
}
DIV#sitemap LI {
padding: 0 0 0 24px;
margin: 0;
list-style-type: none;
}
DIV#sitemap LI {
background: url(//graphics/extm.gif)
no-repeat
0% 0%;
}
DIV#sitemap LI.last {
background: url(//graphics/exlm.gif)
no-repeat
0% 0%;
}
DIV#sitemap LI.file:before {
content: url(//graphics/exfilebw.gif);
}
DIV#sitemap LI.file:before:hover {
content: url(//graphics/exfilecolor.gif);
}
DIV#sitemap LI.folder:before {
content: url(//graphics/exfolderbw.gif);
}
DIV#sitemap LI.folder:before:hover {
content: url(//graphics/exfoldercolor.gif);
}
DIV#sitemap UL {
padding: 0 0 0 24px;
margin: 0 0 0 -24px;
list-style-type: none;
}
DIV#sitemap UL {
background: url(//graphics/exim.gif)
repeat-y
0% 0%;
}
DIV#sitemap UL.last {
background-image: none;
}
DIV#sitemap LI LI {
color: #000000;
font-weight: normal;
}
DIV#sitemap LI.folder:hover {
color: goldenrod;
font-weight: bold;
}
DIV#sitemap LI.file:hover {
color: mediumblue;
font-weight: bold;
}
Das HTML für die Sitemap:
<div id="sitemap">
<ul class="last">
<li class="folder">Abschnitt
<ul>
<li class="folder">Kapitel
<ul>
<li class="file">Unterkapitel</li>
<li class="last file">Unterkapitel</li>
</ul>
</li>
<li class="last folder">Kapitel
<ul class="last">
<li class="file">Unterkapitel</li>
<li class="file">Unterkapitel</li>
<li class="last file">Unterkapitel</li>
</ul>
</li>
</ul>
</li>
<li class="last folder">Abschnitt
<ul class="last">
<li class="folder">Kapitel
<ul>
<li class="file">Unterkapitel</li>
<li class="last file">Unterkapitel</li>
</ul>
</li>
<li class="last folder">Kapitel
<ul class="last">
<li class="last file">Unterkapitel</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>