立体感のあるタブナビゲーション

ボーダーの色をそれぞれ変えて立体感をみせる

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
{
margin-left: 30px;
padding: 0;
height: 20px;
}

#Navigation ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
}

#Navigation ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#Navigation ul li a
{
background: #ddd;
width: auto;
padding: 2px 10px;
margin: 0;
color: #444;
text-decoration: none;
display: block;
text-align: center;
border-left: 1px solid #eee;
border-top: 1px solid #eee;
border-right: 1px solid #ccc;
}

#Navigation ul li a:hover
{
color: #444;
background: #bbb;
}

#Navigation a:active
{
background: #bbb;
color: #444;
}