✔ Drop-Down Menü funktioniert nicht ganz bis IE6

[GreenThunder]

Mein Problem bezieht sich auf ein Drop-Down Menü, welches bis zum IE6 nicht richtig funktioniert.
Es wird zwar alles ganz ordentlich angezeigt, aber will man mit der Maus auf einen Menüpunkt der über dem drunterliegenden Text liegt klicken, dann geht das Menü sofort zu.

http://www.roddeck.net/stadt

<script type="text/javascript">

  <!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>

  <div id="content"> 
  <div id="navbar">
     <ul id="nav">
	<li><a href="index.php?site=startseite">Startseite</a></li>
       <li><a>Stadt</a>
      <ul>
        <li><a href="index.php?site=stadt">Allgemein</a></li>
        <li><a href="index.php?site=ortsteile">Ortsteile</a></li>
        <li><a href="index.php?site=geschichte">Geschichte</a></li>        
        <li><a href="index.php?site=lage">Lage</a></li>        
      </ul>
    </li>
    <li><a>Verwaltung</a>
      <ul>
        <li><a href="#">B&uuml;germeister</a></li>
        <li><a href="#">Ämter &amp; Öffnungszeiten</a></li>
      </ul>
    </li>
    <li><a>Tourismus</a>
      <ul>
        <li><a href="#">Pensionen</a></li>
        <li><a href="#" >Gastst&auml;tten</a></li>
        <li><a href="#" >T&ouml;pfernmarkt</a></li>
        <li><a href="#" >Ausflugsziele</a></li>
      </ul>
    </li>
    <li><a>T&ouml;pferhandwerk</a>
    <ul>
        <li><a href="#">T&ouml;pferein</a></li>
        <li><a href="#" >T&ouml;pfermuseum</a></li>
      </ul>
   </li>
   <li><a>Service</a>
    <ul>
        <li><a href="#">Mietwohnungen</a></li>
        <li><a href="#" >Amtsblatt</a></li>
        <li><a href="#" >Termine</a></li>
      </ul>
   </li> 
  </ul>
  

    </div>
  		<div id="inhalt">
		<?php
		 if (isset($_GET['site']))
				 {
					switch($_GET['site'])
					{	
						case 'startseite': include('startseite.html');
										break;
						case 'stadt': include('stadt.html');
										break;
						case 'ortsteile':  include('ortsteile.html');
										break;
						case 'volleyball':  include('volleyball.php');
										break;
					    default:  include('startseite.html');
					}
				 }
				 else
				 {
					include('stadt.html');
				 }
				?></div>
  </div>

#navbar {
	width:850px;
	margin:1px auto;
	height:2.0em;
	padding-top:0px;
	background:#003399;
	vertical-align:middle;
}

#nav, #nav ul { /* all lists */
	list-style: none;
	margin:0px auto;
	width:62em;
	}

#nav a {
	display: block;
	color:#fff;
	text-decoration:none;
	font-size:1.2em;
	font-weight:bold;
	text-align:center;

padding-top:3px;
padding-bottom:3px;
}
#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	z-index:222;
}
#nav li a { /* second-level lists */
	background: #003399;
	font-weight:bold;
}
#nav li a:hover { /* second-level lists */
	background:#00236B;
	font-weight:bold;
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	
}

 

[Maik]

Hi,

definier für das DIV #navbar eine Schichtposition:

#navbar {
        width:850px;
        margin:1px auto;
        height:2.0em;
        padding-top:0px;
        background:#003399;
        vertical-align:middle;
        position:relative;
        z-index:1000;
}

 

[GreenThunder]

Super! Danke!

Hatte das mit dem z-index auch schon probiert, aber das position:relative; vergessen.

 

[Maik]

z-index greift nur in Verbindung mit position

 

[GreenThunder]

Wobei ich gerade festgestellt habe, dass es jetzt zwar im Menüpunkt "Stadt" zwar bis Geschichte geht, aber die Lage will immer noch nicht.

 

[Maik]

Anstelle der Schichtposition muss diese Regel angewendet werden:

#nav li ul { /* second-level lists */
        position: absolute;
        background:#003399;
        width: 10em;
        left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

Zum Vergleich: http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html

 

[GreenThunder]

Perfekt!
Danke dir!

 

[Maik]

Eine Zugabe hätte ich da noch für dich:

div#content{
        float:right;
        width:850px;
        min-height:500px; /* Mindesthöhe in modernen Browsern */
        height:auto !important; /* important-Regel für moderne Browser, um die nachfolgende height-Deklaration zu ignorieren */
        height:500px; /* Mindesthöhe in IE <7 */
        border-left:1px #039 solid;
}

Dann klappt's auch im IE6 mit der "Mindesthöhe".

 

[GreenThunder]

Nochmals ein dickes Dankeschön!
Eigentlich brauche ich die Mindesthöhe gar nicht, hatte sie nur zwischendurch mal probiert, da irgendwas klemmte. Jetzt hab ich aber wenigstens diese Browserweiche kapiert.