I'm having trouble with Safari and CSS. How do I fix the issue without affecting Chrome?

I'm a beginner that just built a menu bar that changes the color of the webpage. It works perfectly in Chrome, Firefox, Opera, and IE. However, in Safari the 1st, 2nd, and 4th options are one pixel off when you hover over them. I was wondering how to 开发者_如何学编程fix this without messing up how the bar works in Chrome (because they both use Webkit right?).

This is the code for the webpage: http://codepad.org/YrKz8Auy

And this is the code for the CSS: http://codepad.org/pGnL5E5M

Any help or insight would be greatly appreciated!

You have a really complicated structure. Here's what your code could look like when simplified: http://jsfiddle.net/hCmrY/2/

Let me know if there are any Safari issues with it.