<style type="text/css">
#minitabs{
margin:0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}
#minitabs li{
margin: 0;
padding: 0;
display: inline;
list-style-type:none;
}
#minitabs a{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration:none;
font-size: 12px;
color: #9c9; // 처음 보이는 기본 색깔
}
#minitabs a.active, #minitabs a:hover {
border-bottom: 4px solid #232; // 글씨 위에 마우스 올릴때 라인 색깔
padding-bottom: 2px; //글씨에 라인이 떨어질 위치(거리)
color: #344; // active 되었을때 색깔
}
#minitabs a:hover{
color: #696; // 글씨 위에 마우스 올릴때 색깔
}
</style>
<body>
<ul id="minitabs">
<li><a href="#" class="active">링크</a></li> // 하이라이트된 탭이 계속 켜져있게 하기
<li><a href="#">책</a></li>
<li><a href="#">영화</a></li>
<li><a href="#">음악</a> </li>
</ul>
</body>
[출처] 네비게이션 메뉴바 만들기|작성자 사자
