Frage stellen
ich habe mir dieses CSS hier als Vorlage für mein Dropdown Menü genommen. http://www.cssplay.co.uk/menus/skeleton2.html
Mein Menü hierzu ist folgendes:
- Code: Alles auswählen
<ul>
<li><a><b>Home</b></a></li>
<li><a><b>"._jon."</b></a></li>
<li><a><b>"._preview."<b></a>
<ul>
<li><a><b>"._templates."</b></a></li>
<li><a><b>"._pics."</b></a></li>
</ul>
</li>
<li><a><b>"._faqs."</b></a>
<ul>
<li><a><b>"._tattoo_faqs."</b></a></li>
<li><a><b>"._tattoo_artikel."</b></a></li>
<li><a><b>"._tattoo_website."</b></a></li>
</ul>
</li>
</ul>
(lasst euch von den PHP Konstanten nicht irritiern)
Folgendes Problem ist nun entstanden. (Nur im Internet Explorer)
Das erste Klappmenü klappt ordnungsgemäß nach unten.
Aber beim zweiten Klappmenü wird das erste ebenfalls aufgeklappt und das nicht unterhalb des zugehörigen Punktes sonder ganz links.
Screenshot:
Woran kann sowas liegen?
Falls das CSS intressant ist, hier bitte:
- Code: Alles auswählen
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/skeleton2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#nav,
#nav ul {padding:0; margin:0; list-style:none; font: 10px arial, verdana, sans-serif; background-color:brown; position:relative; z-index:100;}
#nav {height:23px; width:740px; padding:0; background:#000;}
#nav table {border-collapse:collapse;}
#nav li {float:left;}
#nav li li {float:none;}
/* a hack for IE5.x and IE6 */
#nav li a li {float:left;}
#nav li a {display:block; float:left; color:#fff; height:23px; padding:0 20px 0 10px; line-height:22px; text-decoration:none; white-space:nowrap; font-weight:bold; border-left:1px solid #000;}
#nav li li a {height:21px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:100;}
#nav a:hover {position:relative; z-index:100; background:#843; color:#fff; border-left:1px solid #843;}
#nav li:hover > a {border-left:1px solid #843; background:#843; color:#fff;}
#nav :hover ul {left:0; top:23px; border-left:1px solid #843; z-index:300;}
#nav a:hover ul {left:-1px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:0; margin-left:100%; top:0;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover li:hover > a {background:#843; color:#fff; border-left:1px solid #843;}
#nav li a:hover ul li a:hover {background:#843;}
/* but IE5.x and IE6 need this lot to style the flyouts*/
/* show next level */
#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:100%; top:0;}
/* keep further levels hidden */
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
Wäre nett wenn jemand den Fehler entdeckt.
Danke
Grüße
Tabea
