CSS-Formatierung von Sitemaps, Beispiel 16

1.
Abschnitt
1.1
Kapitel
1.1.1
Unterkapitel
1.1.2
Unterkapitel
1.2
Kapitel
1.2.1
Unterkapitel
1.2.2
Unterkapitel
1.2.3
Unterkapitel
2.
Abschnitt
2.1
Kapitel
2.1.1
Unterkapitel
2.1.2
Unterkapitel
2.2
Kapitel
2.2.1
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: 30px;
   }

DIV#sitemap DD {
   margin: -30px 0 0 70px;
   padding: 0;
   }
DIV#sitemap DD DL {
   margin-top: 30px;
   padding: 0;
   }

Das HTML für die Sitemap:

<div id="sitemap">
<dl>
  <dt>1.</dt>
  <dd>Abschnitt</dd>
  <dd><dl>
      <dt>1.1</dt>
      <dd>Kapitel</dd>
      <dd><dl>
          <dt>1.1.1</dt>
          <dd>Unterkapitel</dd>
          <dt>1.1.2</dt>
          <dd>Unterkapitel</dd>
          </dl>
      </dd>
      <dt>1.2</dt>
      <dd>Kapitel</dd>
      <dd><dl>
          <dt>1.2.1</dt>
          <dd>Unterkapitel</dd>
          <dt>1.2.2</dt>
          <dd>Unterkapitel</dd>
          <dt>1.2.3</dt>
          <dd>Unterkapitel</dd>
          </dl>
      </dd>
      </dl>
  </dd>
  <dt>2.</dt>
  <dd>Abschnitt</dd>
  <dd><dl>
      <dt>2.1</dt>
      <dd>Kapitel</dd>
      <dd><dl>
          <dt>2.1.1</dt>
          <dd>Unterkapitel</dd>
          <dt>2.1.2</dt>
          <dd>Unterkapitel</dd>
          </dl>
      </dd>
      <dt>2.2</dt>
      <dd>Kapitel</dd>
      <dd><dl>
          <dt>2.2.1</dt>
          <dd>Unterkapitel</dd>
          </dl>
      </dd>
      </dl>
  </dd>
</dl>
</div>