Pouvez-vous utiliser différentes images d'icône pour chaque élément de la liste dans une liste non ordonnée?

Je ne suis pas un utilisateur avancé de CSS, mais j'ai une connaissance de travail décentes, je suppose. Je suis tryin pour faire une liste non-ordonnée qui utilise des icônes différentes pour chaque élément de la liste. Je voudrais également que la couleur de fond de l'élément de la liste pour changer lors d'un hover.

Est-il un moyen de le faire via le CSS, ou voulez-vous simplement d'inclure l'icône de l'image à l'intérieur d'un élément de liste (comme ci-dessous)?

<li><img src="voters.jpg"><a href="voters.html">Voters</a></li>

À l'aide de la list-style-image sur le ul niveau en fait toutes les icônes de la même, et je n'ai pas été en mesure de découvrir une autre façon. La plupart des exemples que j'ai trouvé à vous apprendre à utiliser les images dans une liste, mais seulement si les puces les images sont les mêmes. Je suis vraiment ouvert à toutes les suggestions et améliorations sur la façon dont je suis en train de le faire.

grâce

<div class="content-nav">
  <ul>
    <li class="instructions"><a href="instructions.html">Instructions</a></li>
    <li class="voters"><a href="voters.html">Voters</a></li>
  </ul>
</div>

.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;
}

source d'informationauteur Patrick