CSS JS Dropdown not functioning in IE6-7

I have a CSS 1 level dropdown menu with JS but in IE6 I dont see the sub menus at all and in IE 7 they are behind the content:

Site


#menu {
	width: 760px; loat: left; background: url(../images/backgrounds/menu_bg.png) 0 0 no-repeat;	
}

#menu ul {
     margin-left: 40px;
   
}

#menu li {
    height:38px; line-height:40px; padding:1px 6px; float: left; font: Verdana, Geneva, sans-serif 124%; color:#000;  
}

#menu li a {
    display:block; color:#000; text-decoration: none;
}

#menu li a:hover {
	color: #901414;	
}



#menu li ul {
	width: 180px; position: absolute;  margin: 0 0 0 -999em; z-index:9999; background: #FFF; border: #DEDEDE solid 1px;
}

#menu li:hover ul,
#menu a:hover ul{
    margin-left: 0;
}

#menu li ul li {
	width: 180px; height: 30px; line-height:30px;  display: block; float: left; font-size: 85%;
}


sfHover = function() {
	var sfEls = document.getElementById("menu").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);

any help would be highly appreciated

width: 760px; loat: left;

loat left is float left.

Is this very close to the sons of suckerfish? There are two things going on.

If the subs don’t come up from behind content who comes later, then the content who comes later must be positioned? Did you relatively position it? Or is it Flash.

Except for Flash, the solution is to set your menu parent (in your case, the div) to position: relative so you can give it a large z-index. Your subs will remain absolutely positioned but they don’t need any z-index, and IE won’t listen to them there anyway.

Since the #menu is getting positioned, you’ll need to add position: relative to the main-level li’s, so that the sub ul’s are in relation to their parent li’s (otherwise they’ll all sit to the left, seeing the #menu element as their nearest positioned ancestor).

For IE6, that script you have is assuming that the class of “sfhover” has already been styled in your stylesheet. The Javascript only adds and removes the class. But you have to style it.

So usually in every place where you have li:hover statements, you add “li.sfhover” there as well.


#menu li a:hover {
    color: #901414; 
}

Don’t forget to :focus.

display: block; float: left;

Since the main-level li’s are already floated left, that should cascade down to the sub li’s. So, they were already blocks by default, and now they should also be floated, without needing the extra declaration at the bottom.

Hi Stomme poes. Thank you for the reply.

loat left is float left.

Yes stupid just saw it :slight_smile:

For the rest! It’s indeed working now thank you so much for the input :slight_smile: