Hover Effekt funktioniert nicht

[Tommmy]

Ich versuche im moment eine Dropdown Navigation zu erstellen. Der HTML Code sieht so aus:

CODE
<div id="nav" class="mod_navigation block">
<a class="invisible" title="Navigation überspringen" href="index.php/philosophie.html#skipNavigation_4"/>
<ul class="level_1">
<li class="submenu trail first">
</li>
<li class="submenu">
<a class="submenu" onclick="this.blur();" title="CRACOX" href="index.php/cracox_bearbeitung.html">CRACOX</a>
<ul class="level_2">
<li class="first">
<a class="first" onclick="this.blur();" title="Bearbeitung" href="index.php/cracox_bearbeitung.html">Bearbeitung</a>
</li>
<li>
<a onclick="this.blur();" title="Qualitätssicherung" href="index.php/cracox_qualitaetssicherung.html">Qualitätssicherung</a>
</li>
<li class="last">
<a class="last" onclick="this.blur();" title="Premium Verschleißschutzstahl" href="index.php/cracox_forschung.html">Premium Verschleißschutzstahl</a>
</li>
</ul>
</li>
<li>
<a onclick="this.blur();" title="Rohstoffgewinnung" href="index.php/rohstoffgewinnung.html">Rohstoffgewinnung</a>
</li>
<li class="submenu last">
</li>
</ul>
<a id="skipNavigation_4" class="invisible" title="Navigation überspringen"/>
</div>



Und der CSS Part so:


CODE #nav {
background-image:url(tl_files/css/bilder/nav.gif);
background-repeat:repeat-x;
border:1px solid #A2E6CD;
bottom:0px;
height:21px;
left:0px;
margin-top:10px;
overflow:visible;
position:absolute;
right:0px;
top:110px;
width:948px;
z-index:999;
}
#nav * {
margin:0pt;
padding:0pt;
}
#nav ul {
line-height:1;
list-style-type:none;
min-width:1%;
}
#nav a, #nav p {
color:#FFFFFF;
display:block;
font-family:verdana,arial;
font-size:11px;
font-weight:bold;
padding:5px;
text-decoration:none;
}
#nav a:hover {
text-decoration:none;
}
#nav li {
float:left;
margin-right:20px;
min-height:1%;
min-width:1%;
}
#nav li:hover, #nav li.sfhover {
background-image:url(tl_files/css/bilder/hover.gif);
}
#nav ul ul {
background-color:#00925B;
left:-999em;
position:absolute;
}
#nav li li {
clear:left;
}
#nav li:hover ul, #nav ul li.sfHover ul li {
left:auto;
}



Und dieses Javascript um Hover im 6er zu aktivieren:


CODE
sfHover = function() {
2 var sfEls = document.getElementById("nav").getElementsByTagName("li");
3 for (var i=0; i<sfEls.length; i++) {
4 sfEls[i].onmouseover=function() {
5 this.className+=" sfhover";
6 }
7 sfEls[i].onmouseout=function() {
8 this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
9 }
10 }
11}
12if (window.attachEvent) window.attachEvent("onload", sfHover);



Der hover Effekt geht in Opera, Firefox, Safari, IE 7 nur nicht im 6er. Woran liegt das?

 

[Urs]

hier siehst du dass hoover in ie6 nur teilweise funktioniert:
http://www.css4you.de/browsercomp.html