Color asignado a menu secundario

[mayid]

Tengo un menu secundario, que se muestra cuando el mouse pasa por arriba del menu primario. Y para ese menu tengo un color asignado, pero el color recién se carga después de un segundo de posar el mouse sobre el desplegable.

En realidad, en menu primario es todo un renglon, y existe un menu secundario para cada item de ese renglon.

El css que asigna el fondo es este:

/* background images */

#menu ul li.uno ul,#menu ul li.uno li a {}
#menu ul li.dos ul,#menu ul li.dos li a {background: url(../filtros/azul.png) repeat}
#menu ul li.tres ul,#menu ul li.tres li a {background: url(../filtros/dorado.png) repeat;}
#menu ul li.cuatro ul,#menu ul li.cuatro ul li a {background: url(../filtros/v.20/rosa.png) repeat}
#menu ul li.cinco ul ,#menu ul li.cinco ul li a {background: url(../filtros/blanco.png) repeat;}
#menu ul li.seis ul ,#menu ul li.seis ul li a {background: url(../filtros/verde.png) repeat}
#menu ul li.siete ul,#menu ul li.siete li a {background: url(../filtros/naranja.png) repeat}
#menu ul li.ocho ul ,#menu ul li.ocho li a {background: url(../filtros/violeta.png) repeat}

Link a la pagina, aqui.

Les agradecería comentarios.

[David]

Es porque las imágenes sólo se cargan a la hora de mostrarlas, una forma de solucionar el problema es usando sprites.

[mayid]

Gracias David. Estuve leyendo la nota. Entiendo que eso es muy util para un primer renglón. Pero en cuanto a los desplegables, parece que van a tener que cargar su imagen recién cuando se despliguen.

Supongo que un menu secundario con un color simple se cargaría rápido. Pero mi tema es que necesito que el color de fondo tenga transparencia, y por eso uso .png

Estoy intentando un hack con javascript en estos momento. Si tienen alguna otra pista, por favor cuentenme.

[David]

Si entiendes la técnica, no va a haber problemas en aplicarlo a tu menú. No necesitas crear imágenes para cada elemento, sólo lo que vas a necesitar son los backgrounds (ya que el texto no necesita estar en la imagen) unidos en una única imagen.

[mayid]

Pero y que hay de esto?

Es porque las imágenes sólo se cargan a la hora de mostrarlas

Es decir, al cargar la pagina, mi menú secundario está escondido. Y tiene imagenes. Y aunque le pusiera una imagen sprit, seguiría siendo imagen. O de que me estoy perdiendo? Nunca usé sprits.

[mayid]

Y que tal si cargo las imagenes también en un div que esté fuera de pantalla? Al mostrar el menú secundario se haría una consulta al servidor o se usarían rápidamente las mismas imagenes que cargué en otro div?

[David]

La gracia está en que vas usar una única imagen tanto para los botones iniciales (las que se muestran al cargar la página) como para los botones que se muestran al desplegar. Sólo que en cada una vas a mostrar diferentes partes de la misma imagen.

[mayid]

Si, ya entendí. Si cargo la imagen para el menu primario, queda en memoria, y el menú secundario la tiene ya servida, y no necesita conectarse al servidor. Ergo, no hay tiempo de espera. Genial!

Ahora estoy sin ganas de editar los .png, así que usé un div con position absolute, y con una serie de spans que cargan todas las imagenes que necesito. El div está fuera de pantalla así que la única función que cumple es "precargar" los .ong

Muchas gracias David! Estuve tres meses sin resolver esto.

Este es el codigo:

<div id="iris">
<span class="dos"></span>
<span class="tres"></span>
<span class="cuatro"></span>
<span class="cinco"></span>
<span class="seis"></span>
<span class="siete"></span>
<span class="ocho"></span>
</div>

/* background images */

#menu ul li.uno ul,#menu ul li.uno li a {}
#iris span.dos,#menu ul li.dos ul,#menu ul li.dos li a {background: url(../filtros/azul.png) repeat}
#iris span.tres,#menu ul li.tres ul,#menu ul li.tres li a {background: url(../filtros/dorado.png) repeat;}
#iris span.cuatro,#menu ul li.cuatro ul,#menu ul li.cuatro ul li a {background: url(../filtros/v.20/rosa.png) repeat}
#iris span.cinco,#menu ul li.cinco ul ,#menu ul li.cinco ul li a {background: url(../filtros/blanco.png) repeat;}
#iris span.seis,#menu ul li.seis ul ,#menu ul li.seis ul li a {background: url(../filtros/verde.png) repeat}
#iris span.siete,#menu ul li.siete ul,#menu ul li.siete li a {background: url(../filtros/naranja.png) repeat}
#iris span.ocho,#menu ul li.ocho ul ,#menu ul li.ocho li a {background: url(../filtros/violeta.png) repeat}

#iris span{
padding: 8px;
position: absolute;
top: -100px
}