Bulleted Rollover List

Author: Philip Lindsay

Comments: A simple effect achieved by switching the background image of a 5 pixel gif through different anchor states

Browser support chart

<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>

#navcontainer ul
list-style-type: none;
text-align: left;

#navcontainer ul li a
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;

#navcontainer ul li a:hover
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;

#navcontainer ul li a#current
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;

Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.