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

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><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></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><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
  <ul>
  <li><a href="#">First sub item</a></li>
  <li><a href="#">Sub item 2</a></li>
  <li><a href="#">Last sub item</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>

​