2重ボーダー

枠のボーダーと項目ごとにマウスオーバーした時に見えるボーダーとの2重ボーダー。内側はのボーダーの太さはリストのパディングで調整する。

HTML
<div id="Navigation">
<ul id="nav">
<li id="active"><a href="#">Item number 1</a></li>
<li><a href="#">Item number 2</a></li>
<li><a href="#">Item number 3</a></li>
<li><a href="#">Item number 4</a></li>
<li><a href="#">Item number 5</a></li>
</ul>
</div>

CSS
#Navigation ul
{
margin-left: 30px;
padding: 0;
width: 15em;
}

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

#nav li a
{
width: 14em;
color: #daa520;
text-decoration: none;
display: block;
}

#nav li a:hover
{
background-color: #faebd7;
color: #191970;
}