Ayuda con Menu hecho en CSS

[tux2003]

Buenas tardes amigos desarrolladores:

Estoy desarrollando una pagina web en la cual quiero implementar un tipo de menu que he visto en flash lo implemente con JavaScript & CSS, carga mucho mas rapido y es más facil de manipular pero estoy parado con un detalle que al igual y dicen es muy tonto pero no encuentro resolverlo. Quiero que cada elemento del menu tenga una viñeta y esta cambie con el evento hover
Lei algo en la web acerca de la propiedad list-style-image pero no consigo implementarlo ojala alguien pueda ayudarme anexo mi hoja de estilo para el menu y el menu pueden verlo en www .alzocalo .com aparecen los enlaces los efectos que quiero menos las viñetas saludos y ojala alguien pueda asesorarme o señalar mi error. GRACIAS DE ANTEMANO


HOJA DE ESTILO:
__________________________________________

/*Menu del portal*/
#menu
{
list-style-image:url(../imagenes/jpg/flecha.jpg);
margin:0;
padding:0;
top:30px;
}
#menu li a
{
/*Establecemos la decoracion*/
text-decoration:none;
/*cambiamos la viñeta por la adecuada para el evento*/
list-style-image:url(../imagenes/jpg/flecha.jpg);
/*Establecemos la tipografia a usar*/
font-family:Arial, Helvetica, sans-serif;
/*y el tamaño de la fuente*/
font-size:11px;
/*Establecemos el color*/
color:#000000;
}
#menu li a:hover
{
/*Establecemos el color*/
color:#FFFFFF;
/*Establecemos la decoracion*/
text-decoration:underline;
/*cambiamos la viñeta por la adecuada para el evento*/
list-style-image:url(../imagenes/png/vineta_on.png);
/*y el tamaño de la fuente*/
font-size:12px;
}

-------------------------------------------------------------------
MENU EN DOCUMENTO HTML:
__________________________________________

<div style="position:relative; width:1045; height:125px; top:45px; background-color:#ff9a2d;">
<img style="left:0px; top:20px; position:relative;" src="imagenes/png/logo.png">
<img style="left:390px; top:-50px; position:absolute;" name="icono1" src="imagenes/png/libro-gris.png">
<img style="left:360px; top:-20px; position:absolute;" src="imagenes/png/fondo-menu.png" />
<img style="left:555px; top:-50px; position:absolute;" name="icono2" src="imagenes/png/monos-gris.png">
<img style="left:530px; top:-20px; position:absolute;" src="imagenes/png/fondo-menu.png" />
<img style="left:745px; top:-50px; position:absolute;" name="icono3" src="imagenes/png/dados-gris.png">
<img style="left:700px; top:-20px; position:absolute;" src="imagenes/png/fondo-menu.png" />
<img style="left:905px; top:-50px; position:absolute;" name="icono4" src="imagenes/png/cara-gris.png">
<img style="left:870px; top:-20px; position:absolute;" src="imagenes/png/fondo-menu.png" />
<ul style="position:absolute; left:390px;" id="menu">
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba1</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba2</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba3</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba4</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba5</a></li>
</ul>
<ul style="position:absolute; left:560px;" id="menu">
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba1</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba2</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba3</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba4</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba5</a></li>
</ul>
<ul style="position:absolute; left:730px;" id="menu">
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba1</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba2</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba3</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba4</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba5</a></li>
</ul>
<ul style="position:absolute; left:900px;" id="menu">
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba1</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba2</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba3</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba4</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba5</a></li>
</ul>
</div>

[buzu]

list-style-image, como su nombre lo dice, es una propiedad de las listas no de los enlace. Prueva con:

Código CSS:

#menu li{
   list-style-image: url(../url);
}
 

[tux2003]

Ke onda muchas gracias por tu aporte pero ya lo he intentado y no funciona ojala alguien sepa como resolverlo
Gracias de antemano y espero puedan ayudarme, yo sigo leyendo y buscando pero no puedo resolverlo aun Gracias

[kseso?]

¿Has probado a colocar el fondo como fondo:

Código css:

#menu ul li a {display: block; background: url(tuimagen.ext);/*define el tamaño si fuera necesario*/}
#menu ul li a:hover {background: url(tuimagen2.ext);}
 

De todas formas, tienes una estupenda colección de menús sólo css en este foro obra de Mikmoro de probada funcionalidad con múltiples navegadores (incluido ie6)

Un saludo

[buzu]

humm... en que navegador te da los problemas? Probablemente dicho navegador no soporta la propiedad list-style-image por que en FF lo veo sin problemas.

[tux2003]

Ke tal:

Gracias por sus aportes la propuesta de poner el fondo con las viñetas me va a hacer un poco mas lenta la descarga y cuando quiera anexar elementos tendria que editar el background cosa que no se me hace muy practica.
Efectivamente en FireFox si se ven las viñetas pero no realiza el efecto y en el estupendo Explorer no se ven ojala alguien pueda darme una mano saludos.

[buzu]

Como te dije, el problema es que le estás asignando las viñetas a los enlaces y esa propiedad es de las listas. Agrega lo siguiente que te resolverá el problema en FF:

Código css:

#menu li:hover{
   list-style-image: url(../imagenes/png/vineta_on.png)
}
 

Eso seguirá sin funcionar en el amigo IE ya que IE no reconoce el :hover en nada que no sea un enlace. Desgraciadamente, y aun no entiendo por que, no hay forma de referir al padre de un elemento mediante CSS puro y estándar.

Ahora entremos en lios con el IE. Al parecer en IE la propiedad list-style-image no se hereda por lo que la tienes que asignar directamente a los li y no a la lista completa y mucho menos a los enlaces:

Código css:

#menu
{
 margin:0;
 padding:0;
 top:30px;
}
#menu li{
list-style-image:url(../imagenes/jpg/flecha.jpg);
}
#menu li:hover{
   list-style-image: url(../imagenes/png/vineta_on.png)
}
#menu li a
{
 text-decoration:none;
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 color:#000000; 
}
#menu li a:hover
{
 color:#FFFFFF;
 text-decoration:underline;
 font-size:12px;
}
 

Ahora, si no me equivoco eso soluciona el problema con FF y con IE, aun que con IE6 sigue sin funcionar el cambio de viñeta. Para el cambio de viñeta en IE, creo que necesitarías Javascript, y claro, siempre puedes probar lo que dice Kseso? que la verdad no entendí tu razón para no usar esa opción.

Saludos, espero haber sido de ayuda.

[kseso?]

Hola Tux.
¿Quieres ver un cambio de fondo de los enlaces con el añadido de cambiar también el tamaño de la imagen y sin demora ninguna?. Y cuando digo sin demora es sin nada de demora, 0.

Míra este "divertimento". Sencillo y rápido. Ya te adelanto, sólo utiliza a:hover {background-position:..}" y un sólo archivo para todas las imágenes. Y sólo css. Sin js. Y en caso de haber algún problema con la carga de las imágenes o del css sigue siendo funcional.

Un saludo

[tux2003]

Estimados kseso? y buzu:

Gracias por sus aportes me fueron de mucha utilidad a final de cuentas arregle el problema como lo comento kseso? cambiando el fondo de los enlaces entendi como era el pedo y lo implemente.
Gracias por su contribucion saludos

[jomaruro]

Hola:

Iniciado por tux2003

entendi como era el pedo

¿Sonoro? ¿Oloroso?

Saludos.

[buzu]

Bien, bien me da gusto que lo hayas logrado. Kseso? buen aporte.