リストマークに四角ドットを画像で配置したナビゲーション

背景画像に配置したリストマークを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 ul
{
list-style-type: none;
text-align: left;
}

#nav li a
{
background: transparent url(../img/list-1.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Tahoma", "MS UI Gothic","OSAKA";
text-decoration: none;
color: #999;
}

#nav li a:hover
{
background: transparent url(../img/list-2.gif) left center no-repeat;
color: #000;
}