Die vertikale in einer horzontalen Navigation verwandeln mit CSS

Mit wenigen Änderungen an den Style-Angaben, lässt sich aus dieser bereits vorgestellten vertikalen Aufklapp-Navi eine horizontale Drop-Down Navigation erstellen.

1. Änderung

ul#navi  {
  float:left;
  background:#333;
  width:100%;    /* geändert von 150px auf 100% */
}

Mit dieser kleine Änderung sorgen wir dafür, dass die nachfolgenden LI-Elemente der ersten Ebene genug Platz haben, sich nebeneinander zu platzieren.

2. Änderung

ul#navi li  {
 position:relative;            
 float:left;                    /* hinzugefügt um eine horizontale Ausrichtung zu erzielen */
 width:9.375em                  /* Hinzugefügt 150px / 16 = 9.375em */
}

Mit float:left wird dafür gesorgt, dass sich die LI-Elemente auch wirklich nebeneinander gesellen.

3. Änderung

ul#navi ul {
 top:auto;                    /* Passt sich automatisch der geänderten Schriftgröße an */
}

Durch die Angabe top:auto, passen sich alle UL-Elemente ab der zweiten Ebene der geänderten Schriftgröße an.

4. Änderung

/* Neuer Deklarationsblock um die Unterpunkte präzise zu positionieren */

ul#navi ul  li:hover  ul , 
ul#navi ul  ul li:hover  ul  {
 position:absolute;
 left:100%;
 top:0;
 }

Der neu hinzugekommene Deklarationsblock sorgt dafür, dass alle UL-Elemente die Nachfahre von LI sind beim Hovern um 100 Prozent nach links verschoben werden. Somit öffnen sich die Untermenüpunkte immer auf der linken Seite der übergeordneten Navigationspunkte.

So, dass waren die benötigten Änderungen, um eine horizontale Navigation zu erhalten.

Und so sieht's aus»

Hier nochmal die kompletten CSS Regeln

* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}


ul#navi  {
  float:left;
  background:#333;
  width:100%;                 /* geändert von 150px auf 100% */
}

ul#navi a {
 display:block;
 padding:5px;
 color:#fff;
 font-weight:bold;
 border-right:1px solid #fff;
 text-align:center;
}


ul#navi li  {
 position:relative;            
 float:left;                    /* hinzugefügt um eine horizontale Ausrichtung zu erzielen */
 width:9.375em                  /* Hinzugefügt 150px / 16 = 9.375em */
}

/* Alle Ebenen ausblenden */

ul#navi ul  ,
ul#navi  li:hover ul ul , 
ul#navi  li:hover  ul ul ul  {
 position:absolute;
 left:-9999px;
 background:#000;
}

ul#navi  li:hover ul {
  background:#dad;
}

ul#navi  li:hover ul ul {
  background:#777;
}

ul#navi  li:hover ul ul ul {
  background:#444;
}

ul#navi ul {
 top:auto;                    /* Neue Position definiert 16px Schriftgröße + (2 x 5px) padding = 30px / 16 = 1.875em*/
}


/* Einzelne Ebenen einblenden */ 
ul#navi li:hover ul  {
 left:0;
 }


                                 /* Neuer Deklarationsblock um die Unterpunkte präzise zu positionieren */
ul#navi ul  li:hover  ul , 
ul#navi ul  ul li:hover  ul  {
 position:absolute;
 left:100%;
 top:0;
 }


/* Hover Hinter- und Vordergrundfarbe für alle Ebenen */
ul#navi li:hover > a , ul#navi  ul li:hover  > a, ul#navi ul  ul  li:hover  > a, ul#navi ul  ul ul  li:hover  > a  {
  background:#a33;
  color:#fff;
}

ul#navi a span {
 float:right;
  font-weight:normal;
  }

Übrigens muss die gesonderte Angabe für den IE7,die ihr ja im ersten Teil (vertikale Aufklappnavi) kennengelernt habt, entfernt werden.

Zur vertikalen Aufklapp-Navi

erstellt am 24.11.2011

nach oben