CSS and menu active state

How would I go about setting the menu so that the item to the right of the selected/active menu item does not have a background image.

Example with no selected state, just to show how the small 3px width separator, is added

ul li {
    background: url(nav-seperator.gif) no-repeat right top;
}

Next, I need to add a selected state using a repeating background image:

li.active a, li a:hover {
    background: url(nav-active-repeat.gif) repeat-x;
}

Like the example below:

Although the part I want to remove is the part in red:

I would like it to look like this:

Ideally I would like to use only CSS and without adding the class to the next item.

I have created a basic version here: http://jsfiddle.net/6nEB6/3/

EDIT: I have added the print screen of the JSfiddle and the design so you can easily compare and will notice the small开发者_高级运维 image to the right of the selected menu item.

---

Solution

If by "item to the right" you mean the separator image, all you need to do is add a margin right or left that overlaps the image and add the missing pixels to the padding or margin So if I had an initial padding of 21px my resulting CSS for on hover could be

li.active a, li a:hover {
    margin-left: -2px;
    padding-left: 23px;
}

Of course, there are other ways to overlap that image, but that's how I do it. In your current example, this will not work, since the separator is in a different element and overlapping it would not render above it, but below it.

The example below will show you how to properly implement it.

---

Example

Here's an example using only two images: background and separator. The example also demonstrates how to use CSS classes properly, without having to add a new class for each new element. If you want to add a background specifically for the first li element, ie. a selected background with a rounded corner just add this code

li.active:first-child a, li:first-child a:hover{
    background: url(...);
}

as this has a higher specificity, it will override the previous hover instructions for that element.

---

Suggestions

I would suggest you stopped using separate images for every navigator element. You might be better off with one background image and a separator. Using image-only based navigation has several downsides, the biggest ones search engine crawlers and image quality, scaling and rendering in different browsers.

---

This would be possible using the + combinator (see http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators), but only if you switched it around so that the separator image sits to the left instead of to the right:

li 
{ background: url(nav-seperator.gif) no-repeat left top; }
li.active, li:hover
{ background: url(nav-active-repeat.gif) repeat-x; }
li:first-child
{ background: none; }
li.active + li, li:hover + li
{ background: none; }

The problem you get instead is now you don’t have a separator at the end. Of course, you could just add a dummy <li> to the end:

li:last-child
{ width: 10px; }
li:last-child:hover
{ background: none; }

Be advised, however, that + does not work in Internet Explorer 6, and :last-child does not even work in Internet Explorer 7 (the latter being easily solved by using .last instead).

Personally, though, I would use Javascript to solve this. It’s slightly too complex to be solved conveniently using only CSS right now.

If we had universal CSS3 support, it would be a different matter. Then we could easily add the rightmost separator in any number of ways (multiple backgrounds, li:last-child::after, etc.). Of course, sometimes you can rely on good CSS3 support, such as when you’re only targeting mobile WebKit.