Bulleted Rollover List

By Philip Lindsay.

You are more than welcome to use the bullets or you could make your own to suit the theme of your site.

Although every care has been taken I would suggest you see the working menus on there origional site and read of any bugs or fixes.

Right click the image and save them to your computer.

list-off bulletlist-off bullet
list-on bulletlist-on bullet
list-active bulletlist-active bullet

CSS

#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 12px "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;}

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>
$0 Web Hosting