Question

This problem has been driving me nuts for a while now, and I can’t find any mention of a similar problem anywhere… On FF and IE, I don’t see any problems – but on Chrome and Safari, for some child and grandchild menus, the areas covered by those menus are not repainted properly when the mouse leaves those menus. Please see http://jsfiddle.net/xm23e/6/

Obligatory code snippet (sorry, but you really need to go to jsfiddle to see the whole menu – I don’t see a way around that…):

Foster Youth Scholars


Thanks in advance!

Lee

Answer 1

It’s all to do with this line:

#header-wrapper div.main-navigation ul.menu li:hover{position:static}

Changing position:static to position:relative will prevent that from happening.

#header-wrapper div.main-navigation ul.menu li:hover { 
    position: relative;
}

Demo