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;}
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;}