title: horizontal menu with different background image for each li
body: <p>I am looking for nested menu which can have different background images , below is the code which does everything , display subnodes with different color when hovered , but i want a different background image for each link and a separate image for sub nodes. Currently it works using colors. (The size of each image for the links will be different)</p>
  
  <pre><code> &lt;div class="TopMenu"&gt; 
      &lt;ul class="myMenu"&gt; 
          &lt;li&gt;&lt;a href="Home.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="About-Us.aspx"&gt;About us&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="Products-For-Sale.aspx"&gt;For sale&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="Bedsheets-For-Sale.aspx"&gt;Bedsheets&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="Rugs-For-Sale.aspx"&gt;Rugs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="Accessories-For-Sale.aspx"&gt;Accessories&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;/li&gt; 
  
          &lt;li&gt;&lt;a href="News.aspx"&gt;News&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="Services.aspx"&gt;Services&lt;/a&gt;&lt;/li&gt; 
  
      &lt;/ul&gt; 
   &lt;/div&gt;&lt;!--TopMenu--&gt; 
  
  /*style the main menu*/
    #header .myMenu {
  margin:0px;
  padding:0px;
  list-style:none;
   text-transform:uppercase;
  position:absolute;
   z-index:300;
   left:28px;
   top:108px;
   width:952px;
     }
  
  #header .myMenu li
  {
    list-style: none;
    float: left;
    background-color: #4dafde;
    line-height: 25px;
    margin-right: 3px;
    }
  
   #header .myMenu li a:link, .myMenu li a:visited
  {
  display: block;
  text-decoration: none;
  background-color: #4dafde;
  padding: 0.5em 2em 0.5em 2em;
  margin: 0 0 0 0;
  
  }
  
  #header .myMenu li a:hover {
  background-color: #A4D6EE;
  }
  
  
  
  /*style the sub menu*/
  #header .myMenu li ul
    {
  position: absolute;
  visibility: hidden;
  margin: 0;
  padding: 0;
  background-color: #4dafde;
  }
  
  #header .myMenu li ul li {
  display:inline;
  float:none;
   }
  
  #header .myMenu li ul li a:link, .myMenu li ul li a:visited
  {
  display:block;
  width: auto;
  text-decoration: none;
  
   }
  
    #header .myMenu li ul li a:hover
   {
  background-color: #A4D6EE !important;
   }
  </code></pre>
  
  <p>Any help or suggestion will be highly appreciated.
  Thnx</p>