html.de - Text wird übereinander geschrieben.

by SpiceLab

HTML

<nav>
  <ul>
    <li>Startseite</li>
    <li><a href="">Bürgerservice</a>
      <ul>
        <li><h5>Service</h5>
          <ul>
            <li><a href="">Abfallangelegenheiten</a></li>
            <li><a href="">Babysitterdienst</a></li>
            <li><a href="">Elternberatung</a></li>
            <li><a href="">Energieberatung</a></li>
            <li><a href="">Essen auf Rädern</a></li>
            <li><a href="">Familienpass</a></li>
            <li><a href="">REK 2013</a></li>
            <li><a href="">Umwelt</a></li>
            <li><a href="">Vorsorgemappe</a></li>
            <li><a href="">Wahlen</a></li>
          </ul>
        </li>        
        <li><h5>Gemeindeamt</h5>
          <ul>
            <li><a href="">Öffnungszeiten</a></li>
            <li><a href="">Kontakt</a></li>
          </ul>
        </li>       
        <li><h5>Politik</h5>
          <ul>
            <li><a href="">Bürgermeister</a></li>
            <li><a href="">Gemeindevertretung</a></li>
            <li><a href="">Ausschüsse</a></li>
            <li><a href="">Wahlergebnisse</a></li>
          </ul>
        </li>     
        <li><h5>Wissenswertes</h5>
          <ul>
           <li><a href="">Geschichte</a></li>
            <li><a href="">Statistische Daten</a></li>
          </ul>
        </li>       
      </ul>
    </li>
    <li>Soziales</li>
    <li>Freizeit</li>
    <li>Tourismus</li>
    <li>Wirtschaft</li>
  </ul>
</nav>

CSS

nav {
  height:250px;
  position:absolute;
  width:100%;
  top:0;
  left:0;
  background: #2E2EFE
}
nav ul {list-style:none;padding:0;margin:0}
nav > ul {
  float:left;
  position:relative
}
nav ul li {
  position:relative;   
}
nav > ul > li {
  float:left;
  display:inline-block;
  margin:25px
}
nav > ul > li > ul,
nav > ul > li > ul > li > ul {
  display:none;
  position:absolute;
  width:140px;
}
nav > ul > li > ul > li > ul {
  top:0;
  left:140px
}
nav > ul > li:hover > ul,
nav > ul > li > ul > li:hover > ul {display:block}
nav > ul > li > ul > li > h5 {margin:5px 0 0 0}