No mostrar texto en menu

[armandoweb]

Amigos:

Tengo un menu con rollovers de imagenes.

Cada link tiene su estado de imagen y también tiene el texto correspondiente a cada link.

Lo que no me está funcionando es la propiedad text-indent, ya que me muestra el texto de los links sobre las imagenes.

Este es el código que tengo:

Código CSS:

#navigation {
    padding:10px 0px;
    width:145px;
}
#navigation a  {
    display:block;
    background:url("../images/navegacion1.png");
    height:47px;
    text-indent:-9000px;
    color: #dcdcdc;
}
#navigation a.link1:hover {background-position:-146px 0px;}
#navigation a.link2 {background-position:0px -47px;}
#navigation a.link2:hover {background-position:-146px -47px;}
#navigation a.link3 {background-position:0px -94px;}
#navigation a.link3:hover{background-position:-146px -94px;}
 
ul#navigation li {
    display: block;
}
 

Y este el html:

Código HTML:

<ul id="navigation">
    <li><a href="#" class="link1">Home</a></li>
    <li><a href="#" class="link2">Estudio</a></li>
    <li><a href="#" class="link3">Servicios</a></li>
    <li><a href="#" class="link4">Obras</a></li>
    <li><a href="#" class="link5">Contacto</a></li>
</ul>
 

Espero puedan orientarme como solucionar esto.

Desde ya gracias.

[DragonX]

Código HTML:

<ul id="navigation">
    <li><a href="#" class="link1"><span>Home</span></a></li>
    <li><a href="#" class="link2"><span>Estudio</span></a></li>
    <li><a href="#" class="link3"><span>Servicios</span></a></li>
    <li><a href="#" class="link4"><span>Obras</span></a></li>
    <li><a href="#" class="link5"><span>Contacto</span></a></li>
</ul>
 

Código CSS:

#navigation a  span{display:none}
 

[armandoweb]

Genial!!

Muchisimas gracias!!

Saludos.