Bien, tengo un menú lateral del siguiente sitio:
http://cybershaman.awardspace.com/
Para lograrlo, utilicé el siguiente html:
Código:
<div id="lateral">
<ul>
<li class="menu" id="menu-portada"><a href="index.php" title="Portada" accesskey="1">Portada</a></li>
<li class="menu" id="menu-nosotros" ><a href="nosotros.php" title="Nosotros" accesskey="2">Nosotros</a></li>
<li class="menu" id="menu-servicios"><a href="servicios.php" title="Servicios" accesskey="3">Servicios</a></li>
<li class="menu" id="menu-clientes"><a href="clientes.php" title="Clientes" accesskey="4">Clientes</a></li>
<li class="menu" id="menu-contacto"><a href="contacto.php" title="Contacto" accesskey="5">Contacto</a></li>
</ul>
</div>
y el css es este:
Código:
#lateral ul{list-style:none; list-style-type:none; margin:0px; padding:0px;}
#lateral li{padding:0px;}
.menu{width:160px; height:60px; margin:auto; margin-bottom:8px; overflow:hidden; text-indent:-5000px;}
.menu a{width:160px; height:60px; display:block; border:0;}
/*Botones*/
#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;}
#menu-servicios{background:url(graficos/btn_servicios2.gif);}
#menu-servicios a{background:url(graficos/btn_servicios1.gif);}
#menu-servicios a:hover{background:none;}
#menu-clientes{background:url(graficos/btn_clientes2.gif);}
#menu-clientes a{background:url(graficos/btn_clientes1.gif);}
#menu-clientes a:hover{background:none;}
#menu-contacto{background:url(graficos/btn_contacto2.gif);}
#menu-contacto a{background:url(graficos/btn_contacto1.gif);}
#menu-contacto a:hover{background:none;}
*Se puede resumir, pero lo dejé así para que tenga precarga*
Hasta ahí todo funciona a la perfección: Con css activado e imágenes desactivadas se ve correcto, y con css desactivado también.
El problema viene cuando desactivo las imágenes y dejo el css: el menú simplemente es invisible.
¿Existe alguna solución? ¿Debería preocuparme por eso?
Muchas gracias de antemano.
PD: Como las imágenes no son simplemente decorativas, pensé ponerlas en el html y cambiar su fondo con "a:hover img" pero desafortunadamente no funciona en algunos browsers.