CSS navigation submenu and seperator - css

Question

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.

Answer 1

Separator
As you know the main bar (nav_container) has a background image, which makes up the look of the button. The background for each button is the separator and nothing else (10px on the right). So, when your on hover background shows, because its park of the non-hover background.
In order to fix this you need to put the separator in it's own <li>, with the non-hover background. Then when you hover the elements they can easily change to your current on hover image with.
If you don't want to separate the <li> elements then, you will have to will have to make individual full width images for each button, but looking at the way you've gone about making this menu, I doubt you will want to do this.
Here is your working example (I only did the first few buttons): http://jsfiddle.net/tfbhh/43/
Submenu
As I mentioned above, you have set the container background image, you haven't done this on your submenu items, so thats why they don't have a larger looking button. Use your developer toolbar (F12) to see the styling and this should clear it up.

Answer 2

You can use a left padding equal to the width of the separator on the li and change only the background on the a. Also I noticed you used class="separator" on all but the first list item. You could replace that with the :first-child pseudo selector. Then you would get something like this:
li:first-child { padding-left: 0; background: transparent; }
li { padding-left: 3px; background: url(separator.png) no-repeat; }
li a { line-height: 40px; padding: 0 15px; }
li a:hover { background: url(anchor-hover.png) repeat-x; }
Edit: The CSS above covers the core styling of this solution. Here's a working example (using background colors):
http://jsfiddle.net/haa5X/3/
The complete CSS:
ul { overflow: hidden; background: green; }
li:first-child { padding-left: 0; }
li { padding-left: 3px; float: left; background: red; }
li a { float: left; line-height: 40px; padding: 0 15px; background: yellow; }
li a:hover { background: purple; }
The complete HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Edit 2: Sorry, missed the part of the submenu:
http://jsfiddle.net/haa5X/4/
The complete CSS:
ul { overflow: hidden; margin: 0; background: green; }
ul > li:first-child { padding-left: 0; }
ul > li { padding-left: 3px; float: left; background: red; }
ul > li a { float: left; line-height: 40px; padding: 0 15px; background: yellow; }
ul > li a:hover { background: purple; }
li ul { display: none; position: absolute; margin-top: 40px; }
li:hover ul { display: block; }
li li { padding-left: 0; float: none; display: block; }
li li a { float: none; display: block; width: 100%; }
The complete HTML:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>First sub item</li>
<li>Sub item 2</li>
<li>Last sub item</li>
</ul>
</li>
<li>Item 3</li>
</ul>
​