Edit Question - KnowledgeHub

Title Body

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. Is there a way to do this through CSS, or would you just include the icon image within the list element (like below)? <li><img src="voters.jpg"><a href="voters.html">Voters</a></li> Using the list-style-image on the ul 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. thanks <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; }

Tags (comma-separated) Cancel