hallo forum, ich habe ein flyout menü welches soweit auch klappt. leider nur nicht im netscape. in diesem browser bleibt das rote flyout immer am ersten punkt vorn stehen und "wandert" nicht mit. hat jemand einen tipp welche angaben evtl. ergänzt, verändert werden müssen?
hier der code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#menu_container
{
float: left;
background: #aea98c url("../gfx/buttons/background.gif") repeat-y;
background-position: top right;
font-family: "Arial Narrow", sans-serif;
font-size: 12px;
position: relative;
padding: 0px 0px 0px 82px;
z-index: 100;
width: 823px;
margin-bottom: 1px;
min-height: 20px;
z-index: 100;
}
#mainmenu li.separator
{
margin: 5px 15px 0px 15px;
background: url("../gfx/buttons/separator.gif") no-repeat;
width: 2px;
height: 15px;
}
#mainmenu, #mainmenu ul
{
list-style: none;
}
#mainmenu iframe
{
position: absolute;
left: -9999px;
width: 0px;
height: 0px;
}
#mainmenu li
{
float: left;
}
#mainmenu li:hover
{
position: relative;
}
#mainmenu li a
{
display: block;
font-size: 12px;
color: white;
font-family: "Arial Narrow", Tahoma, sans-serif;
height: 25px;
line-height: 25px;
text-decoration: none;
width: auto !important;
width: 1px;
cursor: default;
}
#mainmenu a:hover
{
position: relative;
}
#mainmenu li:hover > ul // 1. Ausklappebene
{
top: 0px;
left: 120px;
width: 156px;
display: block;
position: absolute;
left: 0px;
top: 0px;
z-index: 99;
}
#mainmenu li li a:hover
{
background-color: #920018;
}
#mainmenu li ul
{
position: absolute;
left: -9999px;
padding-top: 11px;
width: 156px;
background: transparent;
}
#mainmenu li li a
{
cursor: pointer;
}
#mainmenu > li:hover > ul
{
left: -16px;
top: 25px;
}
#mainmenu li li
{
display: block;
width: 156px;
background-color: #c51e26;
}
#mainmenu li li a
{
display: block;
width: 156px;
text-indent: 16px;
border-bottom: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
}
#mainmenu li:hover ul.first
{
top: 0px;
}
#mainmenu table
{
border-collapse: collapse;
width: 0px;
height: 0px;
border: 0px;
font-size: 1em;
}
#mainmenu li a:hover ul
{
left: -16px;
top: 26px;
width: 120px;
}
#mainmenu li a:hover ul a:hover ul,
#mainmenu li a:hover ul a:hover ul a:hover ul,
#mainmenu li a:hover ul a:hover ul a:hover ul a:hover ul,
#mainmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul
{
top: 0px;
left: 120px;
}
#mainmenu a:hover ul ul,
#mainmenu li a:hover ul a:hover ul ul,
#mainmenu li a:hover ul a:hover ul a:hover ul ul,
#mainmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul,
#mainmenu a:hover ul iframe,
#mainmenu li a:hover ul a:hover ul iframe,
#mainmenu li a:hover ul a:hover ul a:hover ul iframe,
#mainmenu li a:hover ul a:hover ul a:hover ul a:hover ul iframe
{
left: -9999px;
}
#mainmenu a:hover iframe
{
left: 0px;
top: 25px;
}
#mainmenu a:hover a:hover iframe,
#mainmenu a:hover a:hover a:hover iframe,
#mainmenu a:hover a:hover a:hover a:hover iframe
{
left: 120px;
top: 0px;
}
a.produkt
{
background-color: #6d0012;
}
</style>
</head>
<body>
<div id="menu_container">
<ul id="mainmenu">
<li><a href="#">Unternehmen<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><iframe></iframe><![endif]-->
<ul>
<li><a href="#">Muster</a></li>
<li><a href="#">Muster</a></li>
<li><a href="#">Muster</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="separator"></li>
<li><a href="#">Leistungen<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><iframe></iframe><![endif]-->
<ul>
<li><a href="#">Muster</a></li>
<li><a href="#">Muster</a></li>
<li><a href="#">Muster</a></li>
<li><a href="#">Muster</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>