Mystery of the invisible text in Chrome

I'm building a site with a simple navigation bar. I've written some CSS to show a hover-effect for the buttons. Everything works fine in IE and FF but for some reason in Chrome the menu button text labels are invisibl开发者_运维问答e rendering the menu utterly useless. I spent over an hour researching a solution but can't find anything. I installed firebug lite in Chrome and spent a while trying to get the labels to display by adding z-index rules, changing the label color and removing backgrounds etc etc but nothing will make them appear.

If anyone wants to see this in action try looking at http://naamjoga.cz first in FF and then in Chrome. Any help gratefully appreciated. Thanks

You are floating your links to the left and instead you want to float your list items to the left. Just tested this and the following changes fixes your problem. It doesn't really make sense to be floating your links left anyways.

#nav ul li { float: left; } instead of #nav li a { float: left; }

In my dev version of Chrome, it works as you want if you add display: inline; to your #nav ul li styles. Once you've made that change, check it still works in FF and IE.