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.

[mleonardom]

No se si te entendi bein, pero podrias provar cambiando las lineas 37 y 41 agregando un hover a los li algo asi:

Código HTML:

#tabs .selected a span,
#tabs li:hover
{
background-position: 100% -36px;
color: black;
top: 0;
}

y:

Código HTML:

#tabs .selected a span,
#tabs li:hover
{
background-position: 100% -36px;
color: black;
top: 0;
}

con esto aplicarias el mismo estilo a los tabs seleccionados y a los li con hover.

Espero que esto te sea de alguna utilidad.

[pr0]

Gracias por tu respuesta pero no me funciona haciendo el cambio por el codigo que me has facilitado.

Por si acaso no se me habia entendido, quiero conseguir con el codigo que tengo el efecto de levantar los tabs al hacer hover y al estar seleccionado tal como en el siguiente ejemplo:

http://www.dynamicdrive.com/style/cs...orizontal_tabs


Muchas gracias de nuevo.