パネル風ナビゲーション
ボーダーの上・右と下・左の色を変えることで立体感を出す
HTML
<div id="Navigation">
<ul id="nav">
<li><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
#nav
{
padding: 1px;
margin-left: 30px;
font: bold 12px Verdana, sans-serif;
border: 2px solid;
border-color: #AAA #666 #666 #AAA;
background: #CCC;
width: 200px;
}
#nav li
{
list-style: none;
margin: 0;
padding: 0.25em 1em;
border: 1px solid;
border-color: #FFF #AAA #AAA #FFF;
text-align: center;
}
#nav li a { text-decoration: none; }
#nav li a:link { color: #000; }
#nav li a:visited { color: #666; }