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)