PPaB: Problem bei Anzeige von Dropdown-Menu im IE6

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

  1. Problem bei Anzeige von Dropdown-Menu im IE6

    bleicher Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Grüße,
    der esel6 kann :hover nur bei a, li:hover wird er d.e. ignorieren
    MFG
    bleicher

    --
    __________________________-

    FirefoxMyth
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem bei Anzeige von Dropdown-Menu im IE6

      PPaB
      – Informationen zu den Bewertungsregeln

      Grüße,
      der esel6 kann :hover nur bei a, li:hover wird er d.e. ignorieren
      MFG
      bleicher

      Was könnte ich dann statt dem li:hover schreiben ?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Problem bei Anzeige von Dropdown-Menu im IE6

        ChrisB
        – Informationen zu den Bewertungsregeln

        Hi,

        der esel6 kann :hover nur bei a, li:hover wird er d.e. ignorieren

        Um das zu korrigieren, ist ja offenbar der JavaScript-Teil enthalten.

        Was könnte ich dann statt dem li:hover schreiben ?

        Wenn du das Script nutzt (und JS auf dem Client aktiviert ist), dann brauchst du theoretisch gar nichts zusätzlich schreiben.

        http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern erklärt das Prinzip auch noch mal ausführlich.

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln