向 ul li 中的菜单项添加不同的背景图像答案

【问题标题】：Add different background image to menu item within ul li向 ul li 中的菜单项添加不同的背景图像
【发布时间】：2014-02-04 01:55:31
【问题描述】：

我在 ul li 中有一个菜单，我想只更改其中一个菜单项的背景图像。

在当前背景图片下方的 css 中是 menu-ul.jpg，我需要“胶囊”菜单项的附加背景图片是 menu-ul2.jpg

这是我当前的菜单 html：

<ul class="menu">
<li><a href="index.htm"><strong>home</strong><span></span></a></li>
<li><a href="products.htm"><strong>Products</strong><span></span></a>
<ul>
<li><a href="dew_drops.htm">Dew Drops</a></li>
<li><a href="capsules.htm">Capsules</a></li>
<li><a href="salvation_balm.htm">Salvation Balm</a></li>
</ul>

这是处理菜单项背景图像的 css 片段：

.menu ul {
position:       absolute;
padding:        -3px 10px;
top:            -999em;
width:          107px;
background:     url(../images/menu-ul.jpg) left top repeat;
}

任何帮助将不胜感激...谢谢。

梅格

【问题讨论】：

标签： menu

【解决方案1】：

您可以通过向要更改的列表项添加一个类来达到此效果。

将此添加到您的 CSS 中

.menu ul li.capsule {
 background:     url(../images/menu-ul2.jpg)
}

这在你的 html 中

<li class="capsule"><a href="capsules.htm">Capsules</a></li>

当然还有很多其他方法...

【讨论】：