画像のロールオーバー・ナビゲーション
マウスオーバーしたとき背景画像が変わる。アクティブのページの項目は「id="active"」でhoverの画像を設定
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
#nav ul
{
margin: 0;
padding: 0;
white-space: nowrap;
}
#nav li
{
display: inline;
list-style-type: none;
}
#nav a
{
padding: 1px 8px 1px 25px;
border: 1px solid #333;
background-color: #999;
background-image: url(../img/li_bg02.gif);
}
#nav a:link, #nav a:visited
{
color: #EEE;
text-decoration: none;
}
#nav a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(../img/li_bg02_over.gif);
color: #333;
}
#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(../img/li_bg02_over.gif);
color: #333;
}