CSS：背景如何延伸边框和重叠？

Question

I'm designing a navigation bar as shown in image below (a) with the following code:

<ul>
  <li class="unselected">Step 1</li>
  <li class="selected">Step 2</li>
  <li class="unselected">Step 3</li>
  <li class="unselected">Step 4</li>
  <li class="unselected">Step 5</li>
</ul>

I want to have one background image for unselected steps (d) and one for the selected step (c). For simplicity let's assume Step 1 and Step 5 use the same background as well. I want to adjust the button background in HTML only with a class name.

The question is how can I achieve the result with CSS? I just want to know how background of two neighbor elements can overlap each other ?

Edit: the steps are links. the background is a transparent PNG file preferably only containing the blue or gray shape and its border.

Answer 1

Answer: http://jsfiddle.net/morrison/99LhB/

Notes:

• Click-boxes will be messed up on diagonals. I just realized that this will always be the case. I'd decrease the width of the arrow if I were you to help avoid this issue. I would also add a hover state which would help clarify which one you are hovering on. If they aren't hyperlinks, this doesn't matter: feel free to remove those css rules.
• HTML simplicity makes for CSS complexity in this case. There are less classes to worry about, but now we rely on CSS selectors. I would personally choose this way over the other, but that's a personal choice.
• There's only one image. Uses a CSS sprite to accomplish this. It also speeds up the webpage a little.
• Shows how it looks for all 5 steps.

Answer 2

You can do this. what you want to do is use a negative margin.

.someclass {
    margin-left: -5px;
}

That should overlap the each of the elements (if applied to all li objects).

Answer 3

They can't overlap only the background, but html element might be stacked. However I'd recommend such a solution only if you have no other.

In your visual example, I guess that must be something like that:

Html:

<ul>
  <li class="before_selected">Step 1</li>
  <li class="selected">Step 2</li>
  <li class="after_selected">Step 3</li>
  <li class="unselected">Step 4</li>
  <li class="unselected">Step 5</li>
</ul>

CSS:

.unselected {
  background-image: url('all_grey.jpg');
}
.before_selected {
  background-image: url('left_grey_right_blue.jpg');
}
.after_selected {
  background-image: url('left_blue_right_grey.jpg');
}
.selected {
  background-image: url('all_blue.jpg');
}