IE7 hover state is bogus

Howdy,
I have found a fishy bug in IE7 that is conflicting with my dropdown menus.

It appears that only in IE7, when you hover over the top level (ul li), the hidden sub-nav (ul li ul) is triggered to show, but when your mouse leaves the first li, the sub-nav disappears. Basically, you can't take your mouse out of the top level to get to the sub-nav, or the menu disappears.

All other browsers are fine, and you can navigate to the sub.

here is the style for the sub:

Code:

---

#block-menu-menu-main-nav .content ul.menu li ul {
        display:none;
        left:0 !important;
        font-family:Arial, Helvetica, sans-serif !important;
        list-style:none;
        position:absolute;
        top:30px;
        background:url(../images/dropdownBG.png) repeat ;
        padding:5px 0 0;
        margin:0;
        width:auto;
        height:auto;
}

---

Here is the action to unhide it:

Code:

---

#block-menu-menu-main-nav .content ul.menu li:hover ul {
        display: block;
        width:auto;
}

---

this issue is discussed in many places, including here:
http://css-tricks.com/forums/discuss...blem-on-ie7/p1

from what i can tell tho, it looks like IE7 stops the hover event when you try to leave the li to the ul.

try setting up a width for the ul, and play with the settings.
for an example, this worked in ie7 for me:
http://jsfiddle.net/moritana/HxYxv/