title: Can you use different icon images for each list element within an unordered list?
body: <p>I'm not an advanced user of CSS, but I have a decent working knowledge i suppose. I'm tryin to make an unordered list that uses different icons for each list element. I would also like the background colour of the list element to change upon hover.</p>
  
  <p>Is there a way to do this through CSS, or would you just include the icon image within the list element (like below)? </p>
  
  <pre><code>&lt;li&gt;&lt;img src="voters.jpg"&gt;&lt;a href="voters.html"&gt;Voters&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Using the <em>list-style-image</em> on the <em>ul</em> level makes all of the icons the same, and I haven't been able to figure out another way. Most examples I've found teach you how to use images in a list, but only if the bulleted images are the same. I'm definitely open to suggestions and improvements on the way I'm trying to do this.</p>
  
  <p>thanks</p>
  
  <pre><code>&lt;div class="content-nav"&gt;
    &lt;ul&gt;
      &lt;li class="instructions"&gt;&lt;a href="instructions.html"&gt;Instructions&lt;/a&gt;&lt;/li&gt;
      &lt;li class="voters"&gt;&lt;a href="voters.html"&gt;Voters&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  .content-nav {
      font-size:12px;
      width:160px;
      z-index:0;
  }
  
  .content-nav ul {
      padding:0 20px;
      margin:30px 0;
  }
  
  .content-nav li {
      padding:5px;
      margin:5px 5px;
  }
  
  .content-nav li a {
      color:#666;
      text-decoration:none;
  }
  
  .content-nav li.voters a {
      background:#FFF;
      color:#666;
      text-decoration:none;
      list-style-image:url(images/voters.jpg);
  }
  
  .content-nav li.voters a:hover {
      background:#0CF;
      color:#000;
  }
  
  .content-nav li.instructions a {
      background:#FFF;
      color:#666;
      text-decoration:none;
      list-style-image:url(images/voters.jpg);
  }
  
  .content-nav li.instructions a:hover {
      background:#0CF;
      color:#000;
  }
  </code></pre>