CSS和菜单活动状态

如何设置菜单，使选定/活动菜单项右侧的项目没有背景图像

没有选择状态的示例，只是为了说明如何添加小的3px宽度分隔符

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

接下来，我需要使用重复的背景图像添加选定的状态：

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

如以下示例所示：

虽然我要删除的部分是红色的部分：

我希望它看起来像这样：

理想情况下，我希望只使用CSS，而不将类添加到下一项中

我在这里创建了一个基本版本：

---

编辑：我添加了JSFIDLE的打印屏幕和设计，因此您可以轻松地进行比较，并注意到所选菜单项右侧的小图像

这可以使用

+

组合器（请参阅），但前提是您将其切换，使分隔符图像位于左侧而不是右侧：

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; }

现在的问题是，最后没有分隔符。当然，您可以在末尾添加一个虚拟的

：

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

但是，请注意，

+

在Internet Explorer 6中不起作用，

：last child

甚至在Internet Explorer 7中也不起作用（后者可以通过使用

.last

轻松解决）

不过，就我个人而言，我会使用Javascript来解决这个问题。现在只使用CSS来解决这个问题有点太复杂了

---

如果我们有通用的CSS3支持，那将是另一回事。然后，我们可以通过多种方式（多个背景，

li:last child:：after

等）轻松添加最右边的分隔符。当然，有时您可以依赖良好的CSS3支持，例如仅针对移动WebKit。

解决方案

如果“item to the right”指的是分隔符图像，则只需添加与图像重叠的右侧或左侧边距，并将缺少的像素添加到填充或边距 所以，如果我的初始填充为21px，那么悬停时产生的CSS可能是

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

当然，还有其他方法可以重叠该图像，但我就是这样做的。 在当前示例中，这将不起作用，因为分隔符位于不同的元素中，并且重叠它不会在其上方渲染，而是在其下方渲染

下面的示例将向您展示如何正确地实现它

---

示例

仅使用两个图像：背景和分隔符。该示例还演示了如何正确使用CSS类，而不必为每个新元素添加新类。 如果您想为第一个li元素添加专门的背景，例如，带有圆角的选定背景，只需添加此代码即可

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

由于这具有更高的特殊性，它将覆盖该元素以前的悬停指令

---

建议

我建议您停止对每个导航器元素使用单独的图像。您最好使用一个背景图像和分隔符。

---

使用仅基于图像的导航有几个缺点，最大的缺点是搜索引擎爬虫和图像质量，在不同浏览器中缩放和渲染。

我真的不理解你的问题。更新了一个新图像，应该进一步解释我的意思，所以你是说你想要一个不使用图像的菜单？对不起，John，我还是不明白。也许你想重新表述你的问题？我想他的问题是蓝框旁边的白色1px线，因为他的分隔符图像。该死，为什么我没有看到明显的

左边空白：-3px

解决方案。是的，但我知道你这样做的目的，也许我将来可以使用它。ThanksI为每个导航元素使用相同的sprite图像，并确保搜索引擎也能读取文本。另外，当我在IE7中测试你的例子时，它不起作用，会导致悬停时出现奇怪的闪烁。嗯，我不希望人们使用IE7，或者那种蹩脚浏览器的任何其他版本，除非他们想把头撞到墙上。IE从不与其他浏览器友好相处。无论如何，为了这个。当你必须更改标题时，无需使用图像编辑软件就可以进行导航，这很好。这样可以轻松编辑。正如我所说，以你现在的方式使用它有很多缺点。