I have created a navigation bar that is centered with CSS which works. Each li item is separated with a border which is a background image. When hovering on the nav items, the separator disappears because the hover changes the background (I guess) but I wonder how I can fix this, padding or margin can't work because it will just shift the li element.

Second problem is that the sub menu items aren't displaying correctly and I have no idea why...

Demonstration: http://jsfiddle.net/Xenios/tfbhh/9/embedded/result/

The code: http://jsfiddle.net/Xenios/tfbhh/9/

I'm trying to get this to work for almost a week, and I'm quite tired of it, so I'm looking here for support.