hoverでタブが付くシンプルナビバー
シンプルな横軸のナビバーでマウスオーバーの時に下線風のタブが付く
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
{
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #000;
}
#nav ul, #nav li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#nav a:link, #nav a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#nav a:link#cu, #nav a:visited#cu, #nav a:hover
{
border-bottom: 4px solid #000;
padding-bottom: 2px;
background: transparent;
color: #000;
}
#nav a:hover { color: #000; }