Dropdown menu issues

[Foxtrck]

Hi I'm making this website http://www.dund.co.uk/escapetherake/ I'm using Inline frames to change the main content area, theres also a drop down menu im using, but it seems to get completely stuck once content is loaded in the iFrame. Try clicking on the first link on the left 'Texas Holdem' under 'Poker Games' to load content into the frame and then try using the dropdown menu. It just doesnt hide itself anymore.

Note: There is no problem in Firefox, I just find it in IE7.

This is the css ive used for the menu:

#nav, #nav ul {
	float: left;
	width: 100%;
	list-style: none;
	line-height: 3;
	background: #003815;
	font-weight: bold;
	padding: 0;
	border: solid #eda;
	border-width: 1px 0;
	margin: 0 0 1em 0;
}

#nav a {
	display: block;
	width: 14em;
	w\idth: 9em;
	color: #fff;
	text-decoration: none;
	padding: 0.25em 2em;
}

#nav a.daddy {
	background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
	float: left;
	padding: 0px;
	width:150px;
	height:40px;
	color:#fff;
	background: url(rollover1.gif) center no-repeat;

}


#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	w\idth: 13.9em;
	background:transparent;
	font-weight: normal;
	border:0px;
	margin: 0;
}

#nav li li {
	padding-right: 1em;
	width: 13em
}

#nav li ul a {
	width: 13em;
	w\idth: 9em;
}

#nav li ul ul {
	margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover, #nav li.sfhover {
	background: url(rollover2.gif) center no-repeat;
	color:#000;
}

and also the js controlling the menu:

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);

Any help is much appreciated. Probably something noobish, but I can't find anything right now, pretty busy.