Double Border

Author: David Blackwell

Comments: The padding in the li comes to life with the a:hover, creating a double border on the roll-over. Using {padding: 0 .3em;} gives a double border effect only on the left and right, which is a slightly different effect and also 'shortens' the list vertically, if necessary.

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>

margin: 0 0 0 30px;
padding: 0;
width: 12.5%;

#navlist li
list-style-type: none;
background-color: #191970;
color: #daa520;
border: .2em solid #daa520;
font-weight: 600;
text-align: center;
padding: .3em;
margin-bottom: .1em;

#navlist li a
color: #daa520;
text-decoration: none;
display: block;

#navlist li a:hover
background-color: #faebd7;
color: #191970;

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.