CSS flyout problem with li:hover

Question

Hey there I'm developing a custom theme that has a left navigation menu consisting of images with a javascript mouseover function. I have a few submenus which are sub uls under the main list and I'm trying to create a CSS based flyout so when I mouseover a link with a submenu I get a flyout. I've made this work before but I'm having some trouble here, if anyone can help me figure out why my submenus aren't flying I'd appreciate it I have the submenus hidden and then set to display with li:hover but its not working. The url of the site is http://www.greatlakesnaturalmedicine.com/wp/

This is the CSS for the relevant DIV

#nav {
 margin:0;
 padding:0;
 float:left;
 width:223px;
}

#nav ul {
 margin:0;
 padding:0;
 list-style-type:none;
}

#nav ul li {
 margin:0;
 padding:0;
 position:relative;
}

#nav ul ul {
 position: relative;
 top: 0;
 left: 100%;
 width: 100%;
}

#nav ul ul {
 display:none;
}

#nav ul li:hover ul {
 display:block;
}

#nav ul li img {
 display:block;
}

thnx