title: Add different background image to menu item within ul li
body: <p>I have a menu within a ul li and I'd like to change the background image for only one of the menu items.</p>
  
  <p>In the css below the current background image is menu-ul.jpg and I need the additional background image for the "Capsules" menu item to be menu-ul2.jpg</p>
  
  <p>Here's my current menu html:</p>
  
  <pre><code>&lt;ul class="menu"&gt;
  &lt;li&gt;&lt;a href="index.htm"&gt;&lt;strong&gt;home&lt;/strong&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="products.htm"&gt;&lt;strong&gt;Products&lt;/strong&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="dew_drops.htm"&gt;Dew Drops&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="capsules.htm"&gt;Capsules&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="salvation_balm.htm"&gt;Salvation Balm&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's the piece of css that deals with the background image for the menu items:</p>
  
  <pre><code>.menu ul {
  position:       absolute;
  padding:        -3px 10px;
  top:            -999em;
  width:          107px;
  background:     url(../images/menu-ul.jpg) left top repeat;
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated...thanks.</p>
  
  <p>Meg</p>