IE8 only renders the first class-change in a jQuery CSS drop-down menu

Question

In http://www.scherer.nl/nieuw (the /nieuw part will be removed when the site is ready) the drop-down submenu's on the left should shift up their background image when hovered over, so the hovered item becomes red i.s.o. orange.
With jQuery I'm using toggleClass to add a class 'hover' to the hovered menu-item.
The CSS makes the background-image shift up, which shows the red part of it.
This works fine in any browser, but in IE8 only the first hovered item is changed and it doesn't change back when the mouse is over an other item. When I put IE8 in IE7-compatibility mode, it does work but then the sub-menu's are shifted to the right and down a bit, anyhow, I don't want to force IE to use compatibility mode.

I've been searching for an answer to this problem for several days now, so maybe anybody here can think of a solution?

Answer 1

I found out that when I add a border, a padding or a margin to the 'hover' class, it works in IE8 as well. So when I combine a 1 px right-margin with an IE8 CSS hack, it's good enough. Still, a real solution would be nice.