CSS-Formatierung von Sitemaps, Beispiel 6

• Abschnitt
  • Kapitel
    • Unterkapitel mit einer Bezeichnung, die etwas länger ist und
      deshalb zwei Zeilen Text benötigt.
    • Unterkapitel
  • Kapitel
    • Unterkapitel
    • Unterkapitel
    • Unterkapitel
• Abschnitt
  • Kapitel
    • Unterkapitel
    • Unterkapitel
  • Kapitel
    • Unterkapitel

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 UL {
   padding: 0 0 0 24px;
   margin: 0 0 0 -24px;
   list-style-type: none;
   }

Das HTML für die Sitemap:

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