Beispiele aus dem Buch (Abschnitt 2.7: Strukturen und Validierung)

<div class="nav">
  <span class="unsichtbar">Hauptnavigation</span>
  <ul>
    <li class="hauptkategorie"><a href="#">Hauptkategorie 1</a>
    <ul>
      <li class="unterseiten"><a href="#">Unterseite 1 </a></li>
      <li class="unterseiten"><a href="#">Unterseite 2 </a></li>
      <li class="unterseiten"><a href="#">Unterseite 3 </a></li>
      <li class="unterseiten"><a href="#">Unterseite 4 </a></li>
    </ul>
    <span class="unsichtbar">Ende Unterseiten Hauptkategorie 1</span>
    </li>
    <li class="hauptkategorie"><a href="#">Hauptkategorie 2 </a></li>
    <li class="hauptkategorie"><a href="#">Hauptkategorie 3</a> </li>
  </ul>
</div>

.nav {
  width: 14em;
  float:left;
}
.nav ul {
  list-style-type:none;
  margin:0em;
  padding:0;
}
.nav a {
  border:solid 0.1em;
  display:block;
  width: 100%;
  padding:0.2em;
  text-decoration:none;
}
.nav a:active,
.nav a:hover {
  text-decoration:underline;
}
.hauptkategorie {
  margin-bottom:0.05em;
  padding:0.05em;
  font-weight: bold;
}
.unterseiten {
   padding-left:1em;
   margin-top:0.1em;
  font-weight: normal;
}
.unsichtbar {
  position:absolute;
  left:-1000px;
  top:-1000px;
  width:0px;
  height:0px;
  overflow:hidden;
  display:inline;
}