CSS-Navigation Menüpunkt wird bei hover nicht angezeigt

[dobs91]

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!

[Henry]

Hallo dobs91,

ich habe mal versucht zu ergründen, was genau du meinst (schwierig ohne passendes HTML). Auch scheint mir der Code etwas überfrachtet...muss doch einfacher gehen.

Na ja, auf jeden Fall scheitert dein CSS bei meinem Beispiel schon an Ebene 2. Vielleicht kannst Du etwas Licht ins Dunkel bringen, und das bearbeiten?

Gruss
Henry

[Gunnar Bittersmann]

@@dobs91

horizontale Dropdown-Navigationsleiste […] Die funktioniert soweit auch einwandfrei.

Nein, das tut sie nicht. Sie funktioniert nicht per Tastaturbedienung.

/* Verbergen der Unterpunkte */
.menu ul ul {
visibility:hidden;

Die Unterpunkte werden verborgen und waren nie wieder gesehen, da sie durch

/* 2. Ebene sichtbar bei hover auf Grundlevel OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible; 
}

nur bei :hover sichtbar gemacht werden, aber nicht bei :focus.

Übrigens haben heute viele Nutzer (das kann durchaus die Mehrheit sein) überhaupt keine Maus.

Aber ich finde die Lösung nicht.

Ich finde deine fragliche Seite nicht.

LLAP 🖖

[at]

Hallo dobs91.

Dropdown-Navigationsleiste

[…]

vier Listenebenen

[…]

nun eine fünfte und ggf. eine sechste hinzufügen.

[…]

.menu ul :hover ul :hover ul :hover ul :hover ul { 
visibility:visible;
}

Merke: Im Englischen bezeichnet “level” sowohl Navigationsebenen als auch Schwierigkeitsgrade in Geschicklichkeitsspielen.

Mehr als zwei Ebenen von :hover sind eine Zumutung für den Nutzer.

MfG, at