I have a basic css only dropdown menu that works great in Chrome and Firefox but not so well in IE9. The issue is that the design I am implementing has a slight gap between the horizontal row of parent items and their respective child lists of sub navigation items.
I’m displaying the sub-menus on hover of the parent li. The sub-menus appear fine in all browsers.
The problem occurs when I attempt to move the cursor across the small (about 10px) gap between the parent li and the submenu unordered list. The cursor does not actually leave the parent li as the gap is made by applying a larger height to the li (and a smaller height to its child anchor element) so I do not understand why IE is acting like li:hover is no longer happening once my cursor is no longer on the child link.
If I move the cursor really fast across the gap I can actually make it to the sub menu and use it fine but this is no good for usability reasons.
I’m definitely missing something really obvious here!!
To view the problem please visit http://beta.pancreaticcanceraction.org/
Add ‘preview2012’ to the end of that URL to access the site (I didn’t want to put the whole link down in case it gets crawled).
Thanks in advance for any help!
If you set the background of your LI (LI.parent) to be red, you will see that in IE, it doesn’t matter how much extra height you give it, it’s only as high as the containing NAV element.
I’ve been mucking around with the IE9 dev tool, to try and get it to sit on top and “outside” the NAV container, but no luck yet. I thought I would post to help get you on the right direction.
EDIT:
if you put a “position: relative” on your UL.menu element, it fixes the issue.
Hope that helps!