Hi all,

I've made a simple dropdown menu system for my site and it runs fine in chrome, firefox etc but as per usual IE is giving issues.

I've got the code as below,

javascript for IE

Code:
<script type="text/javascript">

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

Code:
#menunav{
	font-size:14px;
}
#menunav, #menunav ul{
	padding:0;
	margin:16px auto;
	position:relative;
}
#menunav li{ 
	padding:2px;
	line-height:32px;
	position:relative;
	float:left;
	list-style:none;
}
#menunav li li{ 
	float:none;
}
#menunav li a{
	background-image:url(../images/button.png);
	background-position:left;
	background-repeat:no-repeat;
}
#menunav li a:hover{
	background-image:url(../images/buttonup.png);
	background-position:left;
	background-repeat:no-repeat;
}	
#menunav a{
	margin-left:8px;
	display:block;
	width:152px;
	color:#0000FF;
	text-align:center;
}
#menunav a:hover{
	color:#FFFFFF;
}
#menunav li ul{
	position:absolute;
	left:-999em;
}
#menunav li:hover ul ul, #menunav li.sfhover ul ul{
	left:-999em;
}
#menunav li:hover ul, #menunav li li:hover ul, #menunav li li li:hover ul{
	top:-16px;
	left:0;
	margin-left:100%;
}
HTML

Code:
<div id="menu">
	
    <ul id="menunav">
    <li><a href="index.php">Home</a></li>
    <li><a href="index.php?main_page=index&cPath=12">Tops</a></li>
    <li><a href="index.php?main_page=product_info&cPath=2&products_id=2">Bottoms</a></li>
    <li><a href="index.php?main_page=index&cPath=4">All-in-ones</a></li>
    <li><a href="index.php?main_page=index&cPath=11">Blankets & Wraps</a></li>
    <li><a href="index.php?main_page=index&cPath=5">NICU</a></li>
	<li><a href="index.php?main_page=index&cPath=3">Accessories</a>
		<ul>
			<li><a href="index.php?main_page=index&cPath=3_9">Hats</a></li>
			<li><a href="index.php?main_page=index&cPath=3_10">Booties</a></li>
		</ul>
	</li>
	<li><a href="index.php?main_page=product_info&cPath=7&products_id=5">Gift Vouchers</a></li>
    <li><a href="index.php?main_page=products_all">All Products</a></li>
	</ul>
        
</div>
So basically what happens is when the dropdown menu pops out I can access the hats submenu then when I try going down to the booties submenu it disapears.

Site is at www.kamelotkidz.co.nz

thanks for any help