Why is this CSS dropdown disappearing in IE9

Question

On my site: http://www.carbonfibergear.com/ if you hover over the "SHOP" menu it shows a dropdown list based on this . I noticed in IE9, once you move the mouse off the word shop, the dropdown disappears. Any idea how I can fix this?

There are some updates to this question which you can see in this answer (please read through the comments): https://stackoverflow.com/a/15622168/1464510

Answer 1

looks like a gap between your button and the menu that IE doesnt like.. it is assuming that you are mousing off the button.. if you move ninja fast, you can keep the menu focused.

Change:

header nav #nav-site li {
margin: 0 10px 3px 0;
}

To:

header nav #nav-site li {
padding: 0 10px 3px 0;
}

see if that helps.. IE acts weird when calculating overall box size including margins.