IE10 stopping menu from working correctly

[AsteroidMonkey]

Please see a menu I’m using on a site below. It works fine in most browsers but with IE10 (IE11 is fine) when you hover over a menu item then go to select a sub menu item, when the cursor goes into any of the small gaps between the vertical sub menu items the menu thinks the user has went outside the submenu and it closes.

Can anybody tell me what is causing this to happen in IE10 and nothing else?

http://codepen.io/anon/pen/BNPagB

Regards, Marc

[Paulie_D]

Just curious, where to the gaps come from?

I can’t see how they are created from a quick glance.

[AsteroidMonkey]

#nav ul ul li {
float:none;
position:relative;
margin:0px;
font-size:14px;
padding-top:1px; < Here
padding-bottom:1px; <And Here
padding-left:2px;
}

[Senff]

I can’t replicate it in IE10, and I can’t really say why it’s happening…but I would suggest to try and get rid of that padding, and replace it with borders on the A (not the LI). Something like this:

http://codepen.io/senff/pen/mJjyXy

[Paulie_D]

But padding is still part of the li so that wouldn’t cause ‘unhovering` and causing the submenus to disappear so there must be something else going on

[Author]

Posts