Problem mit dritter Menüebene

Kaeschdin

Erfahrenes Mitglied
Hallo,

ich habe ein Problem beim Übergang von der zweiten zur dritten Menüebene. Die dritte Menüebene öffnet sich, sobald die Maus über der Schritt des dazu gehörenden Oberpunktes ist - sobald sich die Maus von der Schrift der zweiten Ebene weiter nach rechts bewegt, klappt sich die dritte Menüebene wieder zu.

Im angehängten Beispiel passiert das beim Menüpunkt "Elektrische Energiespeicher". Natürlich soll die dritte Ebene aufgeklappt bleiben, bis ein Menüpunkt angeklickt wurde bzw. solange nicht wieder eine andere Ebene oder ein anderer Menüpunkt gehovert wird.

Für CSS-Cracks sicher kein Problem. Daher wäre ich euch dankbar, wenn ihr mir die Stellschraube nennt. Danke! Kerstin

Hier der HTML-Code der Navigation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/menu.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="menu">
<ul id="toplevel">
<li><a href="stromspeicher.html">Stromspeicher</a>
<ul>
<li><a href="speicher_elektroautos.html">Speicher für Elektromobilität bzw. Elektroautos</a></li>
<li><a href="elektrische_energiespeicher.html">Elektrische Energiespeicher </a>
<ul>
<li><a href="doppelschichtkondensatoren.html">Doppelschichtkondensatoren</a></li>
<li><a href="smes_speicher.html">Supraleitender magnetischer Speicher (SMES)</a></li>
<li><a href="hochtemperatur_speicher.html">Hochtemperatur-Speichersysteme</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>


Hier der CSS-Code aus der Datei css/menu.css:

#menu {height:182px; width:180px; position:relative;z-index:10; margin-top:2px;}

#menu ul {margin:0; padding:0; list-style:none; text-align:left; padding:10px 180px 10px 10px; z-index:10; width:180px;}

#menu li {margin:0; padding:0; list-style:none;z-index:10;}
#menu li {display:inline;}
#menu ul ul {position:absolute; left:-9999px; background-color:#CCCCCC;}
#menu ul#toplevel {position:absolute; left:0; top:0;z-index:10; padding:0 0 0 2px;}

#menu a {display:block; font: 9pt verdana,arial,sans-serif; font-weight:bold; color:#494949; line-height:14px; text-decoration:none;padding:3px 15px 3px 0px;z-index:10; margin-right:0px; width:180px}
#menu a.last {border-bottom:none}
#menu li a.fly {background: url(../anywidth/arrow.gif) no-repeat right top;}

#menu li a:hover { color:#333;}
#menu li:hover > a { color:#333;}

#menu ul li:hover > ul {left:100%; margin-top:-35px; margin-left:-1px;width:180px;white-space:nowrap; }

#menu a:hover ul,
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
 
Ändere und ergänze das CSS wie folgt:
CSS:
...
#menu li {float:left;width:370px} /* Elementbreite ergibt sich aus der width- u. padding-Regel des übergeordneten ul-Elements */
...
#menu ul li:hover > ul,
#menu ul li:hover > ul li:hover > ul {left:100%; margin-top:-35px; margin-left:-1px;width:180px;white-space:nowrap; }
Diese Regeln können entfernt werden, da die definierten Nachfahren-Selektoren im HTML-Code überhaupt keine Übereinstimmung vorfinden, und somit auch wirkungslos bleiben:
CSS:
#menu a:hover ul,
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
______________
[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Zurück