css Hover problem in chrome and safari

This is the site which has a probl开发者_JAVA技巧em

http://www.clubforeducation.com/

Top menu will change its color at mouse over. All browsers except chrome and Safari. Is it a Webkit bug. If that how can i solve this?

I find setting display:block on the <a> works. I don't recommend li:hover because it doesn't work in IE6

Seems like a webkit hover behavior thingy.

Check this out:
CSS Hover + Element crashing in webkit (Chrome, Safari)

Changing/ the selector from

.menu_center ul li a:hover

to

.menu_center ul li:hover a

Or combining both:

.menu_center ul li a:hover,
.menu_center ul li:hover a 
{ .... }

works for me.

I found that adding href="#" works as a temporary fix. Seems like this is a pretty recent development.

Usually the best fix is to add -webkit-transform: translate3d(0,0,0)on the elements that have the transition in Safari. I've got the same problem and fix it Hover bugs with :before On Safari