strange behaviour when changing the color of link when hovering on parent list item

My issue can be seen here - http://jsfiddle.开发者_开发百科net/aBSyH/3/

I'm using cufon text replacement and think that's the source of the issue.

The link's color should change when you hover in and out of the list item and it's content. But it's behaving quite strangely. It changes back to blue sometimes but generally stay red.

There seems to be something wrong with using cufon text and a selector like -

li.mainmenu:hover a {
    color:red;   
}

The cufon text does not revert to it's original colour when the mouse leaves the li's hover area.

Any idea why?

I'd prefer to fix the issue without adding any javascript (apart from chaging the cufon initialisation code).

Marjin pointed me in the right direction, if I could up vote his answer again I would.

I really should have read the instructions to begin with - https://github.com/sorccu/cufon/wiki/FAQ#wiki-faq-10

This is how I fixed it -

Cufon.replace('ul#onesite_navigation > li', {
    hover: true,
    hoverables: { li: true },
    ignore: { ul: true },
    textless: { li: true }
});