Creo que he encontrado una solución, pero no sé si sea de lo más correcto.
Tengo el CSS de está manera:
Código:
menu{width:160px; height:60px; margin:auto; margin-bottom:8px; overflow:hidden;}
.menu a{width:160px; height:60px; display:block; border:0;}
#menu-portada{background:url(graficos/btn_portada2.gif);}
#menu-portada a{background:url(graficos/btn_portada1.gif);}
#menu-portada a:hover {background:none;}
#menu-nosotros{background:url(graficos/btn_nosotros2.gif);}
#menu-nosotros a{background:url(graficos/btn_nosotros1.gif);}
#menu-nosotros a:hover{background:none;}
//ETC
Y el HTML de esta otra:
Código:
<ul>
<li class="menu" id="menu-portada"><a href="index.php" accesskey="1"><img scr="menuitem" alt="Portada"></a></li>
<li class="menu" id="menu-nosotros" ><a href="nosotros.php" accesskey="2"><img scr="menuitem" alt="Nosotros"></a></li>
</ul>
La clave está en que la imagen "<img scr="menuitem" alt="Portada">" En realidad es un GIF Transparente, para que así cuando se deshabiliten las imágenes de cualquier manera muestra su texto alternativo.
¿Creen que exista algún inconveniento u otro método más correcto?