Lista con imágenes y texto oculto

[pzin]

Pues al final conseguí que funcionara para FF, IE6 e IE7. Imagino que se verá bien en otros exploradores también, aunque no probé.

Así quedó:
HTML

Código HTML:

<ul>
<li><a href="#" id="menuInicio"><strong id="txt">Inicio</strong><span></span></a></li>
<li><a href="#" id="menuRestaurantes"><strong id="txt">Restaurantes</strong><span></span></a></li>
<li><a href="#" id="menuCocinas"><strong id="txt">Cocinas</strong><span></span></a></li>
<li><a href="#" id="menuContacto"><strong id="txt">Contacto</strong><span></span></a></li>
</ul> 

CSS

Código HTML:

#cabecera ul{
position:absolute;
top:0;
text-align:right;
width:900px;
}
/* hack IE-6 */ * html #cabecera ul{margin-top:15px;}
/* hack IE-7 */ *:first-child+html #cabecera ul{margin-top:15px;}


#cabecera li{
display:inline;
}


#menuInicio,#menuRestaurantes,#menuCocinas,#menuContacto{font-size:0;}
/* hack IE-6 */ * html #txt{display:none;}
/* hack IE-7 */ *:first-child+html #txt{display:none;}

#menuInicio span,#menuRestaurantes span,#menuCocinas span,#menuContacto span{
height:178px;
display:block;
float:left;
margin-top:-2px;
}

#menuInicio span{
background:transparent url(/imagenes/menu/inicio.png);
width:80px;
margin-left:450px;
}
/* hack IE-6 */ * html #menuInicio span{margin-left:110px;}
/* hack IE-7 */ *:first-child+html #menuInicio span{margin-left:220px;}

#menuRestaurantes span{
background:transparent url(/imagenes/menu/restaurantes.png);
width:134px;
}

#menuCocinas span{
background:transparent url(/imagenes/menu/cocinas.png);
width:97px;
}

#menuContacto span{
background:transparent url(/imagenes/menu/contacto.png);
width:115px;
}

#menuInicio span:hover,#menuRestaurantes span:hover,#menuCocinas span:hover,#menuContacto span:hover{
background-position:0 -179px;
}

Evidentemente márgenes y demás cosillas es a gusto y necesidad de cada cual.
Lo único que aún me falta por solucionar es lo de que IE6 no reconoce la pseudo-clase :hover en otro elemento que no sea A.