dobs91: CSS-Navigation Menüpunkt wird bei hover nicht angezeigt

Beitrag lesen

Hi!

Ich habe vor mittlerweile 6 Jahren als blutiger CSS-Anfäger eine horizontale Dropdown-Navigationsleiste erstellt (aus diversen Tutorials zusammengeklickt) und auf meiner Seite eingebunden. Die funktioniert soweit auch einwandfrei.

Allerdings hat sie insgesamt nur vier Listenebenen (ul bzw. li). Ich möchte nun eine fünfte und ggf. eine sechste hinzufügen. Eigentlich sollte dies einfach machbar sein, indem die entsprechenden Code-Schnipsel analog zu den vorhergehenden Ebenen kopiert und entsprechend angepasst werden. Aber aus irgendeinem Grund wird mir die fünfte Ebene, nachdem ich sie mit visibility:hidden ausgeblendet habe, nicht mehr angezeigt, wenn ich sie per float auf die vorherige Ebene anzeigen möchte.

Hier mein CSS-Code:

#info {height:500px;}

/* Festlegen der Gesamtrahmenweite */
.menu {
width:1000px; 
font-size:0.85em;
padding-bottom:0px;
}
/* Standardlistendesign unterdrücken */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
z-index:2;
}
.menu ul ul {
width:130px;
}
/* Horizontale Ausrichtung und Festlegen der Positionen der Dropdown-Elemente */
.menu li {
float:left;
width:130px;
position:relative;
z-index:90;
}
/* Grundlinks */
.menu a, .menu a:visited {
display:block;
font-size:10px;
text-decoration:none; 
color:#fff; 
width:119px; 
height:20px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#000000; 
padding-left:10px; 
line-height:19px;
}
/* Korrektur IE 5.5-Kompatibilität (1) */
* html .menu a, * html .menu a:visited {
width:130px;
w\idth:119px;
}

/* Hintergrund 2. Ebene */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#000000;
}
/* Hover 2. Ebene */
.menu ul ul a.drop:hover{
background:#FFFFFF;
}
.menu ul ul :hover > a.drop {
background:#FFFFFF;
}
/* Hintergrund 3. Ebene */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#000000;
}
/* Hover 3. Ebene */
.menu ul ul ul a:hover {
background:#FFFFFF;
}
.menu ul ul ul :hover > a {
background:#FFFFFF;
}
/* Hintergrund 4. Ebene */
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {
background:#000000;
}
/* Hover 4. Ebene */
.menu ul ul ul ul a:hover {
background:#FFFFFF;
}
.menu ul ul ul ul :hover > a {
background:#FFFFFF;
}
/* Hintergrund 5. Ebene */
.menu ul ul ul ul ul a, .menu ul ul ul ul ul a:visited {
background:#000000;
}
/* Hover 5. Ebene */
.menu ul ul ul ul ul a:hover {
background:#FFFFFF;
}
.menu ul ul ul ul ul :hover > a {
background:#FFFFFF;
}

/* Verbergen der Unterpunkte */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:21px;
left:0; 
width:130px;
}
/* IE 5.5-Kompatibilität (2)*/
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* Position 3. Ebene flyout */
.menu ul ul ul{
left:130px; 
top:0;
width:130px;
}
/* Position 3. Ebene flyout links */
.menu ul ul ul.left {
left:-130px;
}

/* Tabelle nicht am Layout beteiligen (für IE) */
.menu table {position:absolute; top:0; left:0;}

/* Links 2. Ebene */
.menu ul ul a, .menu ul ul a:visited {
background:#000000; 
color:#FFFFFF; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:109px

/* IE 5.5-Kompatibilität (3) */
}
* html .menu ul ul a{
width:130px;
w\idth:109px;
}

/* Grundlinks hover */
.menu a:hover, .menu ul ul a:hover{
color:#000000; 
background:#FFFFFF;
border:1px solid #FF0000; 
border-width:1px 1px 0 0; 
}
.menu :hover > a, .menu ul ul :hover > a {
color:#000000;
background:#FFFFFF;
}

/* 2. Ebene sichtbar bei hover auf Grundlevel OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible; 
}
/* 3. Ebene verbergen wenn hover auf 1. Ebene OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* 4. Ebene verbergen wenn hover auf 2. Ebene OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* 5. Ebene verbergen wenn hover auf 3. Ebene OR link */
.menu ul :hover ul :hover ul :hover ul ul{
visibility:hidden;
}
/* 3. Ebene sichtbar wenn hover auf 2. Ebene OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* 4. Ebene sichtbar wenn hover auf 3. Ebene OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}
/* 5. Ebene sichtbar wenn hover auf 4. Ebene OR link */
.menu ul :hover ul :hover ul :hover ul :hover ul { 
visibility:visible;
}

Neu hinzugefügt werden soll wie gesagt die fünfte Ebene. Ich habe das Gefühl, irgendwo etwas übersehen zu haben, was die Anzeige der 5. Ebene bei hover auf das vorhergehende ul-Element unterdrückt. Aber ich finde die Lösung nicht. Weiß jemand Rat?

Besten Dank schonmal!