Hi,

I am having a bit of a problem with a drop down menu..

Code:

Css:
Code:

#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	width:532px;
} 

#nav a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	display: block;
	height:22px;
	float:left;
} 

#one a{
	background-image:url(images/navbg.jpg);
	width:113px;
	text-indent:-2000px;
}

#two a{
	background-image:url(images/navbg.jpg);
	background-position:-113px 0px;
	width:110px;
	text-indent:-2000px;
}

#three a{
	background-image:url(images/navbg.jpg);
	background-position:-223px 0px;
	width:106px;
	text-indent:-2000px;
}

#four a{
	background-image:url(images/navbg.jpg);
	background-position:-329px 0px;
	width:203px;
	text-indent:-2000px;
}

#nav li {
	float: left;
}

#nav li ul {
	position: absolute;
	text-indent:0px;
	width:150px;
	font-size:12px;
	left:-999em;
	background-color:#006666;
	margin-top:22px;
} 

#nav ul li {
	width:150px;
}
#nav li ul a{
	color:#FFFFFF;
	padding-left:10px;
	background-image:none;
	text-indent:0px;
	display:block;
} 

#nav li ul a:hover{
	color:#F79623;
	background-color:#002D59;
} 

#nav li:hover ul { 
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul { 
	left: auto;
}
Javascript:
Code:
<!--//--><![CDATA[//><!--
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);
//--><!]]>
HTML:
Code:
<ul id="nav">
					<li id="one"><a href="#">1</a>
					<ul>
				 	<li><a href="">Link</a></li>
					<li><a href="">Link</a></li>
					<li><a href="">Link</a></li>
					<li><a href="">Link</a></li>
					</ul>
					</li>
					<li id="two"><a href="#">2</a>
					<ul>
				 	<li><a href="">Link</a></li>
					<li><a href="">Link</a></li>
					<li><a href="">Link</a></li>
					<li><a href="">Link</a></li>
					</ul>
					</li>
					<li id="three"><a href="#">3</a>
					<ul>
				 	<li><a href="">Link</a></li>
					<li><a href="">Link</a></li>
					<li><a href="">Link</a></li>
					<li><a href="">Link</a></li>
					</ul>
					</li>
					<li id="four"><a href="#">4</a>
					<ul>
				 	<li><a href="">Link</a></li>
					<li><a href="">Link</a></li>
					<li><a href="">Link</a></li>
					<li><a href="">Link</a></li>
					</ul>
					</li>
					</ul>
The problem is that in IE the drop down menus start to the left of the link .. I think this is because the properties of #three a{ etc are being inherited into #nav li ul a{ I could be wrong..

What do you think? Do you see anything wrong with my code?

Thanks,
Michael