Добавить другое фоновое изображение в пункт меню в ul li

Question

У меня есть меню внутри ul li, и я бы хотел изменить фоновое изображение только для одного из пунктов меню.

В CSS ниже текущего фонового изображения меню ul.jpg и мне нужно дополнительное фоновое изображение для элемента меню «Капсулы» быть меню-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; 
} 

Любая помощь будет высоко ценится ... спасибо.

Meg

Answer 1

Вы можете достичь этого эффекта, добавляя класс к элементу списка, который требуется изменить.

Добавьте это в CSS

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

И это в HTML

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

Off Конечно, есть много других способов ...