Hover Doesn't Work On Nested Ul In Ie9

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 mous

Solution 1:

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)

Solution 2:

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