いろいろナビゲーションバー4

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: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 10px;
}

#nav li
{
display: inline;
padding-bottom: 14px;
padding-left: 20px;
background-repeat: no-repeat;
}

#nav a
{
padding-left: 20px;
padding-bottom: 14px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}

#nav a:link, #nav a:visited
{
padding-left: 20px;
color: red;
background: url("../img/mark08.gif");
background-position: 0 -28px;
background-repeat: no-repeat;
}

#nav a:hover
{
color: black;
padding-left: 20px;
background: url("../img/mark08.gif");
background-repeat: no-repeat;
background-position: 0 -14px;
}