css - 如何根据所选元素在菜单上更改背景

Question

这让我望而生畏，我看不到前进的道路。这是我第一次在这里提出问题，如果我不遵守协议(protocol)，请纠正我。谢谢!!!

我需要根据所选元素更改菜单的背景，以便在激活时，左侧的元素将显示为橙色，而右侧的元素将显示为灰色。

此外，分隔颜色的三 Angular 形必须保持在事件菜单项的右侧。

对于第一个元素，很简单，但是对于第二个和以后的元素，我无法让代码工作，因为它切入了菜单的边界。

例如，我有[individuos] [empresas] [corredores] [proveedores]

当 empresas 处于事件状态时，individuos 和 empresas 应为橙色，而 corredores 和 providores 应为灰色。

如果选择了 corredores，则 individuos、empresas 和 corredores 应该是橙色的，而 proveedores 是灰色的。

我想张贴图片来说明，但作为新手，我不允许。

#navigation {
  position: absolute;
  line-height: 40px;
  padding: 0;
  margin: 0;
  margin-left: 210px;
  width: 730px;
  background-color: #757373;
}

#navigation ul li a {
  text-decoration: none;
  float: left;
  padding: 0 40px 0 10px;
}

#navigation .empresas .active {
  background: url(images/the-background.png) no-repeat right;
}

这个不错

这个不是，看INDIVIDUOS应该是橙色的

Answer 1

也许 this fiddle提供一些灵感？

CSS:

#navigation li {
    background-color: #ffa500;
}
#navigation li.active+li,
#navigation li.active+li+li,
#navigation li.active+li+li+li,
#navigation li.active+li+li+li+li,
#navigation li.active+li+li+li+li+li {
    background-color: #757373;
}

HTML:

<div id="navigation">
    <ul>
        <li><a href="">professionals</a></li>
        <li><a href="">organizations</a></li>
        <li class="active"><a href="">others</a></li>
        <li><a href="">others2</a></li>
    </ul>
</div>

更新

参见 updated fiddle用“箭头”等等。如果您希望它也适用于 IE7，请添加 span 元素而不是使用 :before 和 :after。