Author: Russ Weakley
Comments: Use background-image: url(images/arrow.gif) to add images to the background of each list item. Use padding to shift the content so that it does not overlap the background image.
This method gives much more consistent results than simply replacing the bullets with images.
Browser support chart
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS
#navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}
#navlist li
{
padding-left: 10px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}