Dropdown menu woes with IE

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

<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

#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

<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 https://www.kamelotkidz.co.nz

thanks for any help

Seems to work OK in IE7 and IE8.

I'm running IE7 and when I try moving between the dropdown submenus it disapears on me. Could it be an issue with me just then?

The tab disappears for me also in IE7, but if I hold the left click button down while hovering I can then cick on the booties tab.

Once on the booties page, I have no problem with the button disappearing. As a matter of fact - from any page other than the home page there is no problem.

Tina

Ok I did a test then and discovered you are onto something, on all other pages it works fine, i'm wondering if it's the fact there is a link right behind where the popout menu sits causing the issue?

Has anyone ever come across such an issue?

Issue resolved, discovered IE dislikes when you put padding into a li removed the padding and made the line height larger and problem solved. Weird..