Dropdownmenüs

[quatermain]

Guten Abend.. Bin mit folgendem Problem konfrontiert.. Habe ein Dropdownmenü als Navi erstellt..

<ul id="nav">  
	<li><a href="home.php?page=aktuell" class="stylenavi">NEWS</a>  
		<ul>  
		  <li><a href="home.php?page=aktuell"class="styleunavi">Aktuelles</a></li>  
		  <li><a href="home.php?page=archiv"class="styleunavi">Archiv</a></li>  
  
  
		</ul>  
	</li>  
  
	<li><a href="home.php?page=verein"class="stylenavi">VEREIN</a>  
		  
	</li>  
  
</ul>

Das ganze ist mit folgendem css-style versehen..:

<style type="text/css">  
#nav, #nav ul {  
	padding: 0;  
	margin: 0;  
	list-style: none;  
	  
}  
  
#nav a {  
	display: block;  
 	padding: 4px;  
	  
}  
  
#nav a:hover {  
	display: block;  
 	padding: 4px;  
	background-color:#990000;  
}  
  
#nav li {  
	float: left;  
	padding: 4px;  
	  
}  
#nav li ul {  
	position: absolute;  
	padding: 4px;  
	width:7em;  
	left: -999em;  
}  
  
#nav li:hover ul {  
	left: auto;  
	  
}  
  
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);  
  
#nav li:hover ul, #nav li.sfhover ul {  
	left: auto;  
	  
}

Das Problem ist nun das folgende: Im Firefox ist alles tiptop, doch im IE verschwinden die Dropdowns nicht mehr wenn die Maus das Menü verlässt, sondern erst beim nächsten Klick auf einen Menüpunkt.

Kann mir jemand helfen?

Gruss Jan

[Antipitch]

Hi Jan,
grob gesehen sollte dein Code eigentlich so funktionieren (sollte eher ein CSS-HTML Problem sein). Hast du eine vernünftige Dokumenttyp Deklaration in deiner Seite?

Aber ein paar Punkte:

Hier

#nav li ul {
left: -999em;
}

#nav li:hover ul {
left: auto;

}

wird gewöhnlich mit

  
#nav li ul {  
display: none;  
}  
#nav li:hover ul {  
display: block;  
}  

gearbeitet.

Das

getElementsByTagName("LI")

sollte

  
getElementsByTagName("li")  

heißen.

Das

replace(new RegExp(" sfhover\b"), "")

geht auch so

  
replace(" sfhover", "")  

Statt dieser Registrierung,

if (window.attachEvent) window.attachEvent("onload", sfHover);

die sowieso nicht empfehlenswert ist, solltest du ein externes JS per Conditional Comments nur für den IE6 einbinden (eh der einzige Browser, der es braucht) und dort ganz normal mit window.onload arbeiten.

Zu zwei verschieden Umsetzungen vgl. hier (Javascript ganz unten) oder hier (ganz ohne Javascript).

cheers
Antipitch

[quatermain]

besten Dank für deine Antwort, klappt nun perfekt :-)