ロールオーバー・ナビゲーション3

背景画像がマウスオーバーしたとき変わる。アクティブのページの項目は「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
#Navigation
{
margin-left: 30px;
padding: 0;
width: 200px;
font-family: "Tahoma", "MS UI Gothic","OSAKA";
font-size: 14px;
}

#navigation ul
{
margin-left: 0;
padding: 0;
list-style-type: none;
}

#nav li { margin: 0 0 3px 0; }

#nav li a
{
display: block;
padding: 6px 6px 6px 25px;
border: 1px solid #333;
background-color: #999;
background-image: url(../img/li_bg01.gif);
width: 100%; }

html>body #nav li a { width: auto; }

#nav a:link, #nav a:visited
{
color: #fff;
text-decoration: none;
}

#nav a:hover
{
border: 1px solid #333;
background-color: #F60;
background-image: url(../img/li_bg01_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_bg01_over.gif);
color: #333;
}