I have this website where on the left menu there's a nested menu on the "hotel" link. The submenu that appears hovering "hotel" has a gap on the left, but since in the gap the mouse hovers the nested "ul" element there are no problems in Firefox or Google Chrome. But this doesn't work in IE9 (not sure about other versions), infact I can't reach the submenu because it disappears.
Is this a known bug? Am I doing something wrong?
IE9 is seeing the <ul/> padding-left or <li/> margin-left as empty content and so the mouse hover goes straight through it.
I'm not sure why it is doing this but an easy fix would be to add a repeating transparent background image or, if legacy support is not needed, add background-color: (255, 255, 255, 0.01)
Try removing the 20px padding on the nested UL
Then give the UL a margin top of -5px
Then give the nested LI elements a margin-left of 20px
