タブ付きのナビゲーションバー
タブ付きを表現。「id="cu"」でアクティブのページは色を変えて確認しやすくしている。
HTML
<div id="Navigation">
<ul id="nav">
<li id="active"><a href="#" id="cu">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: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#nav li
{
list-style: none;
margin: 0;
display: inline;
}
#nav li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#nav li a:link { color: #448; }
#nav li a:visited { color: #667; }
#nav li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
#nav li a#cu
{
background: white;
border-bottom: 1px solid white;
}