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

背景の色がマウスオーバーしたとき変わる

HTML
<div id="Navigation">
<ul id="nav">
<li><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;
border-right: 1px solid #000;
font-family: "Tahoma", "MS UI Gothic","OSAKA";
background-color: #90bade;
color: #333;
}

#Navigation ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#nav li
{
border-bottom: 1px solid #90bade;
margin: 0;
}

#nav li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

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

#nav li a:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}