Cascading Style Sheets { CSS-Formatierung von Sitemaps : Beispiel 07a }

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: 20px;
   }
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 span.abschnitt {
   line-height:15px;
   background:#eee;
   padding: 2px;
   border: 1px solid #ccc;
   display:block;
   width:500px;
   }
DIV#sitemap LI > span.abschnitt {
   line-height:14px;
   }
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;
   }

Das HTML für die Sitemap:

<div id="sitemap">
<ul class="last">
<li><span class="abschnitt">Abschnitt</span>
    <ul>
    <li>Kapitel
        <ul>
        <li>Unterkapitel mit einer Bezeichnung, die etwas länger ist und
            <br />deshalb zwei Zeilen Text benötigt.</li>
        <li class="last">Unterkapitel</li>
        </ul>
    </li>
    <li class="last">Kapitel
        <ul class="last">
        <li>Unterkapitel</li>
        <li>Unterkapitel</li>
        <li class="last">Unterkapitel</li>
        </ul>
    </li>
    </ul>
</li>
<li><span class="abschnitt">Abschnitt</span>
    <ul class="last">
    <li>Kapitel
        <ul>
        <li>Unterkapitel</li>
        <li class="last">Unterkapitel</li>
        </ul>
    </li>
    <li class="last">Kapitel
        <ul class="last">
        <li class="last">Unterkapitel</li>
        </ul>
    </li>
    </ul>
</li>
</ul>
</div>

CSS-Formatierung von Sitemaps, Beispiel 7a