* {
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
ul#navi {
float:left;
background:#333;
}
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;
}