IE8 list item hover affect other list items when sub-menu active

I have a main menu using a list. When the user hovers over an item it moves up to indicate the hover to the user all while changing the background color and displaying its sub-menu.

Link to the website with the issue.

Add debug=true to the query string if you need firebug.

The issue is in IE8 where if a sub-menu is active and the user hovers over any list item in the main level all of the previous items act like they are being hovered over too. This means that those list items move up but the background-color does not change. Depending how the user moves the mouse over the list items, some of the items will even go bellow the start position.

Here is the SASS that I converted to CSS in order to help understand how I move my menu items like that.

#mainmenu ul li:hover,
#mainmenu ul li.active{
    margin-top: -15px
}

The only difference in HTML between The sub-menu being active and not is the main level list item has a class subactiv开发者_StackOverflow社区e which is not used by any css and the active sub list item gets a class active.

I have a feeling that the issue is somewhere between the background-color change and the margin-top negative value.

Usually one would expect the elements after to be affected and not the ones before.

Please avoid any Javascript fixes please.

Thank you!

---

In IE8, when you adjust the margin-top: -15px, it pushes the UL box top to fit, instead of letting the LI go outside the UL box. So all the other tabs move up to fit the new UL box.

I suggest setting the non-hover LI to margin-top: 15px and hover LIs to margin-top: 0--reverse it.

#mainmenu UL LI
{
    margin-top: 15px;
}

#mainmenu UL LI:hover
{
    margin-top: 0;
}

(This will still work cross-browser.)