Couple of days ago I found a rendering problem in Internet Explorer when testing a nested vertical submenu. Click on the picture below and you will see that when you hover the vertical submenus you cannot click on the lower items. The submenu disappears when you scroll over the little spaces between the list items. On Firefox and Chrome you’ll not see this problem.
Internet Explorer bugs are not that rare but this shows in IE8 and the new IE9, and I couldn’t find a fix on the internet.

View from ie9 of hover bug demo page

Here you can see the demo for the hover bug in IE (IE9 inclusive) . The bug is not showing when I remove the test image which the menu overlays.
I tried some tweaks at the margin and padding, z-index and zoom with no result. If this is a known bug or you know other fix than that the one posted below please let me know.

My solution

The solution I found was to put a background to the hover state of the nested menu (#menu ul ul:hover) . I used an 1 by 1 transparent gif (the old days spacer) as a background.
Here is the fixed version using a background with transparent gif. It solves the problem in IE9 and down to IE7.
The bug and the solution seems to remain valid even for the IE10 as I can test it in the preview.

And, if you know some place that rewards this kind of descoveries for IE please point me to it.