PPaB: Problem bei Anzeige von Dropdown-Menu im IE6

Beitrag lesen

SELF-Forum

Problem bei Anzeige von Dropdown-Menu im IE6

PPaB
– Informationen zu den Bewertungsregeln

Ich habe das Problem, dass im IE 6 mein Dropdown-Menu nicht richtig angezeigt wird. Bei den neuerem IE und beim Firefox wird das Menu über dem normalen Anzeigefeld angezeigt, so wie es sein soll, aber beim IE 6 wird das div mit dem Menu erweitert und dort das Menu angezeigt. Dies möchte ich gerne beheben, sodass es auch richtig angezeigt wird. Hoffe mir kann jemand helfen. Habe den Code schonmal versucht so weit wir möglich zu reduzieren.

  
<html>  
<head>  
<title>Homepage</title>  
<style type="text/css" media="screen">  
	body  
	{  
		margin: 0;  
		padding: 0;  
		font: 85% arial, hevetica, sans-serif;  
		text-align: center;  
		color: #505367;  
		background-color: #D6D6D6;  
	}  
  
	#container  
	{  
		margin: 1em auto;  
		width: 1000px;  
		<!--width: 1003px;-->  
		text-align: left;  
		background-color: #0438FE;  
		border: 1px solid black;  
	}  
  
	#mainnav  
	{  
		height: 17px;  
	}  
  
  
</style>  
  
<style type="text/css">  
a {  
	text-decoration: none;  
}  
  
a:link {  
	color: black;  
}  
  
a:visited {  
	color: black;  
}  
  
a:active {  
	color: black;  
}  
  
a:hover {  
	text-decoration: underline;  
}  
  
.divlink a {  
display: block;  
width: 160px;  
background-color: #0438FE;  
}  
  
.divlink a:hover {  
background-color: #0438FE  
}  
  
ul {  
	list-style: none;  
	padding: 0;  
	margin: 0;  
}  
  
#nav a {  
	font-weight: bold;  
	color: #FFFFFF;  
}  
  
#nav a {  
	text-decoration: none;  
}  
  
#nav li li a {  
	display: block;  
	font-weight: normal;  
	color: #FFFFFF;  
	padding: 0.2em 6px;  
         height: 25px;  
         width: 145px;  
         background-color: #0438FE;  
}  
  
#nav li li a:hover {  
         background-color: #0438FE;  
         color: #FBC701;  
}  
  
li {  
	float: left;  
	position: relative;  
	width: 11em;  
	text-align: center;  
	cursor: default;  
	background-color: white;  
	border: 0;  
}  
  
li#erste {  
	border-left-width: 3em;  
}  
  
li#letzte {  
	border-right-width: 3em;  
}  
  
li ul {  
	display: none;  
	position: absolute;  
	top: 0%;  
	left: 0;  
	font-weight: normal;  
	background-color: #fff;  
	border-right: solid 1px #666666;  
         border-left: solid 1px #666666;  
         border-bottom: solid 1px #666666;  
}  
*li ul {  
	position: relative;  
}  
li>ul {  
	top: auto;  
	left: auto;  
}  
  
li li {  
	display: block;  
	float: none;  
	background-color: transparent;  
	border: 0;  
}  
  
li:hover ul, li.over ul {  
	display: block;  
}  
  
</style>  
  
  
<script type="text/javascript">  
  
loadTopMenu = function()  
{  
if (document.all&&document.getElementById)  
 {  
  menunavParent = document.getElementById("nav");  
  
   for (x=0; x < menunavParent.childNodes.length; x++)  
     {  
        menunode = menunavParent.childNodes[x];  
  
           if (menunode.nodeName=="LI")  
             {  
              menunode.onmouseover=function()  
                {  
                this.className+=" over";  
                }  
                menunode.onmouseout=function()  
                {  
                  this.className=this.className.replace(" over", "");  
	       }  
           }  
        }  
     }  
}  
  
window.onload=loadTopMenu;  
  
</script>  
  
</head>  
<body>  
  
<div id="container">  
  
<div id="mainnav">  
   <ul id="nav">  
  
	<li id="erste">  
		<div class="divlink"><a target="contentframe" href="index.html">Index</a></div>  
	</li>  
  
	<li>  
		<div class="divlink"><a target="contentframe">Index</a></div>  
		<ul>  
			<li><a target="contentframe" href="index.html">Index</a></li>  
			<li><a target="contentframe" href="index.html">Index</a></li>  
		</ul>  
	</li>  
  
<li>  
		<div class="divlink"><a target="contentframe">Index</a></div>  
		<ul>  
			<li><a target="contentframe" href="index.html">Index</a></li>  
			<li><a target="contentframe" href="index.html">Index</a></li>  
		</ul>  
	</li>  
  
<li>  
		<div class="divlink"><a target="contentframe">Index</a></div>  
		<ul>  
			<li><a target="contentframe" href="index.html">Index</a></li>  
			<li><a target="contentframe" href="index.html">Index</a></li>  
		</ul>  
	</li>  
<li>  
		<div class="divlink"><a target="contentframe" href="index.html">Index</a></div>  
  
	</li>  
	<li id="letzte">  
		<div class="divlink"><a target="contentframe" href="index.html">Index</a></div>  
  
	</li>  
  
   </ul>  
</div>  
  
<div id="contents">  
<font color="white">  
         	<br>  
		<br>  
		xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>  
		xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>  
		xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>  
		xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>  
</font>  
</div>  
  
</div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln