Horizontale Navigation a la Suckerfish

**JohannesH** · 23.11.2009, 16:10

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

**Thomas** · 23.11.2009, 17:04

Dazu gibt es ein Tutorial, welches Du mal vergleichen kannst.

https://community.contao.org/de/show...ght=suckerfish

**K.R.** · 24.11.2009, 12:24

Du blendest unter "#menu li ul" durch "display:none" level_2 aus. Unter "#menu li:hover ul" dann ein. Also nur wenn du über die Navigation fährst wird dein zweites level angezeigt!

Und wozu überhaupt dieses Javascript? Ist eigentlich überflüssig bei einem klassischen Dropdown. Kannste auch über eine extra IE-CSS lösen.

Grüße
K.R.

**Sebastian** · 26.11.2009, 16:35

HI

display:none ist nicht gut. Das verbirgt den Inhalt nämlich auch für Suchmaschinen und Screenreader, und ich kann dir versichern, dass du das nicht willst. Nimm also lieber position:absolute und left:-999em. Per position:static bekommst du sie dann wieder zurück.

Sebastian