Lists as Sleek vertical boxes

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
#navcontainer
{
margin: 0;
padding: 5px 0 7px 5px;
width: 50%;
line-height: 1.75;
background-color: #669;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
}

ul#navlist
{
display: inline;
list-style: none;
}

ul#navlist li
{
float: left;
width: auto;
margin-right: 5px;
border: 2px solid #fff;
background-color: #ddd;
}

ul#navlist li a
{
padding: 0 10px;
line-height: 1.75;
text-decoration: none;
color: #03C;
}

ul#navlist li a#current
{
background-color: #669;
color: #fff;
}

ul#navlist li a:hover, ul#navlist a#current:hover
{
background-color: #777;
color: #fff;
}

ul#navlist li a:active, ul#navlist li#active a#current:active
{
background-color: #f63;
color: #fff;
}

Posted in: CSS