Modificacion en menu de tabs

[pr0]

Buenas a todos,
resulta que he conseguido el codigo de un menú de tabs pero me gustaría hacerle una pequeña modificación para que cuando haga hover a un tab éste suba unos pixels hacia arriba para resaltarlo como el tab activo.

CSS:

Código CSS:

#tabs {
  float:left;
  width:100%;
  font-size:93%;
  font-weight:bold;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  line-height:normal;
  border-bottom: 1px solid gray;
}
#tabs ul {
  margin:0;
  padding:16px 10px 0 400px;
  list-style:none;
}
#tabs li {
  display:inline;
  margin:0;
  padding:0;
}
#tabs a {
  float:left;
  background:url("../imagenes/tableft.gif") no-repeat left top;
  margin:4px;
  padding:0 0 0 5px;
  text-decoration:none;
}
#tabs a span {
  float:left;
  display:block;
  background:url("../imagenes/tabright.gif") no-repeat right top;
  padding:5px 12px 4px 6px;
  color:#ECFFEC;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs .selected a{
background-position: 0 -36px;
top: 0;
}
#tabs .selected a span{
background-position: 100% -36px;
color: black;
top: 0;
}
#tabs a:hover span {
  color:#FFFFFF;
}
#tabs a:hover {
  background-position:0% -36px;
}
#tabs a:hover span {
  background-position:100% -36px;
}
 

HTML:

Código HTML:

<div id="tabs">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li class="selected"><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Link 4"><span>Link 4</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
</ul>
</div>
 

Espero que puedan ayudarme. Gracias por adelantado.