将多个背景图像/颜色添加到导航栏

Question

只是想知道是否有人可以帮助我。我正在寻找的（丑陋的）是为网站上的导航栏添加两种背景颜色。基本上所有列表项都将具有红色背景，除了需要具有蓝色背景的背景。我尝试使用1张长背景图片来解决这个问题，但这不适用于浏览器，因为Chrome和Firefox之间的文字定位发生了变化。

我想知道的是，如果有一种方法我可以给所有元素一个红色背景，但可能使用跨度或其他东西来选择导航中我希望有蓝色背景的单个元素？

这就是我想要实现的目标（就像我说的那样难以置信的丑陋）

任何人都可以给我的任何想法或帮助真的很棒

谢谢！

Answer 1

不要给整个导航栏一个背景，而是导航栏的所有元素。然后你可以给一个名为blue的类和CSS：.blue { background: blue; }或类似的东西。 示例：http://jsfiddle.net/A7RMA/2/

Answer 2

<强> DEMO

<nav>
  <ul>
    <li><a href="#">Samples</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#" class="active">Contact</a></li>
  </ul>
</nav>

nav ul{
  list-style:none;
}
nav a{
  display:block;
  float:left;
  padding:10px 20px;
  background:red;
  color:#fff;
  text-decoration:none;
}
nav a.active, nav a:hover{
  background: blue;
}

Answer 3

对于您的静态蓝色项目，请使用DRP96建议的CSS：

.bluemenu
{ 
    background: blue; 
}

对于其他项目，做同样的，但红色：

.redmenu
{ 
    background: red; 
}

将鼠标悬停在红色菜单上时，可以使用：

A:hover
{ 
    background: green; 
}

（将上面片段中的'A'替换​​为您用于菜单项的任何对象。这也应该与您应用redmenu和bluemenu类的项目相同）