Trouble with css :hover menu in IE 7

[Rafiki]

Hi, I've been at this for some time now. Currently building a site (development address: mainline.divsharp.com). Menu (left) was Javascript, its now CSS. Works fine in Chrome, Firefox and IE 8, but IE 7 is acting extremely strange. You can see the desired effect if you use a recent version of one of those browsers.

When I pull it up in IE 7 on the homepage, I can't hover over the popup like I can in the other, more compliant browsers. It either hides the pane as soon as the mouse gets off the main menu link, or when the mouse leaves the picture once its over the pane.

If I then click on, say, "Market Watch" and try to view the menu on an interior page, its even more erratic. I'm about at the end of what I know or can look up how to do here..

If I can get the mouse over some part of the popout pane, it seems that if its over the content area of a div and not padding or margins, it stays open. For example, over the picture or over the grey area to the right... This might suggest something to someone..

Unfortunately, the markup is clogged at best and my style is all over the place. Site is built in Wordpress and is a custom theme. Hopefully this will help:

Home page style sheet:
mainline.divsharp.com/wp-content/themes/mainline/style.css

Interior page style sheet:
mainline.divsharp.com/wp-content/themes/mainline/interior.css

In those stylesheets, there isn't much discernible organization, but the pieces relating to this problem are near the id's labeled menu_bg in the middle and at the very bottom is where the hover effects are. The popout is achieved like this:

<li id="popout_hov">
   <div id="popout">code for menu pane</div>
</li>
#popout_hov #popout {
   display: none;
}
#popout_hov:hover #popout {
   display: inline;
}

Thanks.

[Rafiki]

All the styling for the sidebar menu is now in:

mainline.divsharp.com/wp-content/themes/mainline/sidebar.css

Overrides for the home page are still in:

mainline.divsharp.com/wp-content/themes/mainline/style.css

[Rafiki]

So in case anyone is interested, I found a solution, though not a very elegant one. If someone can think of a better solution, please let me know.

Like I mentioned above, I noticed that the pane wouldn't close if the mouse was over actual content, like the picture, and closed only when crossing padding and margin borders between content (this should still have stayed open, however, as even the padding and margins are inside the original li.. but anyway). I used this behavior to trick IE 7 into thinking it was always over actual content by absolute positioning a transparent png behind the entire div, and slightly overlapping the menu, hidding overflow.

Like I said, not an elegant solution, but it works for the <10% of people who still use IE <=7...