CSS Flyout Menu and IE

Well while I got my menu working and looking how I wanted it I am having a problem in IE with it. If you start at the top of the menu and go down the flyouts don't flyout out. If you start at the bottom and go up the flyouts work and come out like suppose to. Problem is they stay out even you mouse isn't over it. You have to go back down the menu with your mouse for them to close. Is their a fix for this or something I missed. In Firefox it works perfect.

Here is the link

http://www.mesquitechristmas.com

Here is the CSS for the menu only....

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 12.29em;
		margin-top : -1.76em;
	} 

#avmenu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}	

#avmenu li {
margin-bottom: 0px;
}

#avmenu li a {
font-weight: bold;
height: 17px;
text-decoration: none;
color: #505050;
display: block;
padding: 3px 0 0 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
border-bottom: 1px solid #cccccc;
}	
	
#avmenu li a:hover {
background: #eaeaea;
color: #800000;
border-left: 4px solid #FF0000;

#avmenu li ul { 
/* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
	}
}

#avmenu li:hover ul ul, #avmenu li:hover ul ul ul, #avmenu li.sfhover ul ul, #avmenu li.sfhover ul ul ul {
		left: -999em;
	}
	
	#avmenu li:hover ul, #avmenu li li:hover ul, #avmenu li li li:hover ul, #avmenu li.sfhover ul, #avmenu li li.sfhover ul, #avmenu li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}

/*
#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

*/

HTML:

Here is the HTML for the menu

HTML Code:

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="christmasstory.html">The Christmas Story</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="#">Photos</a>
  <ul>
      <li><a href="2007photos.html">2007</a></li>
  </ul></li>
<li><a href="#">Videos</a>
  <ul>
      <li><a href="2007videos.html">2007</a></li>
  </ul></li>
<li><a href="guestbook.html">Guestbook</a></li>
<li><a href="webcam.html">Web Cam</a></li>
<li><a href="webradio.html">Internet Radio</a></li>
<li><a href="http://www.noradsanta.org/" TARGET="_blank">Track Santa</a></li>
<li><a href="projects.html">Projects & How Tos</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</div>

HTML:

-Thanks

 

I am still looking for help with this if anyone can help...

-Thanks

 

Add a height to

#avmenu li ul

edit: hold on, apparently that's not the only place it needs it.
edit: never, mind yes it!

It should work on IE6/5 too.

 

Thanks for your reply. I tried what you suggested but that didn't work. Any other ideas?

-Thanks

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu li ul { 
/* second-level lists */
                height: 17px;
		position : absolute;
		left: -999em;
		margin-left : 12.29em;
		margin-top : -1.76em;
	} 

#avmenu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}	

#avmenu li {
margin-bottom: 0px;
}

#avmenu li a {
font-weight: bold;
height: 17px;
text-decoration: none;
color: #505050;
display: block;
padding: 3px 0 0 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
border-bottom: 1px solid #cccccc;
}	
	
#avmenu li a:hover {
background: #eaeaea;
color: #800000;
border-left: 4px solid #FF0000;
}

#avmenu li:hover ul ul, #avmenu li:hover ul ul ul, #avmenu li.sfhover ul ul, #avmenu li.sfhover ul ul ul {
		left: -999em;
	}
	
	#avmenu li:hover ul, #avmenu li li:hover ul, #avmenu li li li:hover ul, #avmenu li.sfhover ul, #avmenu li li.sfhover ul, #avmenu li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}

/*
#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

*/

Code (markup):