Horizontale Navigation a la Suckerfish
Hallo habe eine "Horizontale Navigation a la Suckerfish" auf meiner seite erstellt.
Jetzt habe ich das Problem mim IE 7 funktioniert die mit FF oder IE > 7 funktioniert sie nicht .
Weiss einer warum ?
Die CSS
Code:
#menu{width:1000px;margin: 0 auto;font-size: 95%;white-space: nowrap;}
#menu a,#menu a:visited{background: transparent;text-decoration: none;padding: 0.25em 1em;color: #fff;float: left;}
#menu p{margin:0px;padding:0px;}
#menu ul{margin:0px;padding:0px;list-style-type:none;width:1000px;background:#ffffff url("images/menu-background.png") left top repeat-x;float: left;}
#menu li{position:relative; float:left; float:left;display:inline;}
#menu li ul{left:-1px;top:29px; /* zweite Ebene beginnt 1 Pixel unter der ersten Ebene */position:absolute; /* Position wird absolut zum Elternelement gesetzt */display:none; /* Ausbleden der Untermenüs */}
#menu li:hover ul,#menu li.sfhover ul{display:block;}
#menu ul li:hover ul ul,#menu ul li.sfhover ul ul{display:none;}
#menu ul ul li:hover ul,#menu ul ul li.sfhover ul{display:block;}
#menu a:hover,#menu a.hover{background: #b6e41c url('images/menu-hover.png') repeat-x;float: left;padding: 0.25em 1em;}
#menu .active{padding:4px 4px 4px 5px;color:#ffffff;background: #b6e41c url('images/menu-hover.png') repeat-x;}
Im Template habe ich folgenden Head Tags eingefügt
Code:
<!--[if lte IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("suckerfish").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>
<![endif]-->
Hat einer ne Idee ?
Die Seite ist www.feuerwehr-garbenheim.com
(Oben die Navigation)
Gruss Johannes
