Ayuda, menú css con imágenes

[ddest]

Hola, he desarrolado un menú en css y funciona perfectamente en FF pero no así en IE 6, ni IE 7 alguien puede ayudarme?

Código:

<div id="menu">
<ul>
<li>
<a href="#" id="aceite"></a>
<ul class="aceite">
<li>Aceites de Oliva</li>
<li><a href="#">Virgen Extra</a></li>
<li><a href="#">Virgen Extra Ecológico</a></li>
</ul>
</li>
<li>
<a href="#" id="vinos"></a>
<ul class="vinos">
<li><a href="#">Vinos</a></li>
</ul>
</li>
<li>
<a href="#" id="jamon"></a>
<ul class="jamon">
<li class="hdp">Jamón ibérico</li>
<li><a href="#">Bellota</a></li>
<li><a href="#">Recebo</a></li>
</ul>
</li>
<li>
<a href="#" id="quesos"></a>
<ul class="quesos">
<li>Quesos</li>
<li><a href="#">Manchego D.O.</a></li>
<li><a href="#">Puro de oveja</a></li>
</ul>
</li>
<li>
<a href="#" id="aceitunas"></a>
<ul class="aceitunas">
<li><a href="#">Aceitunas</a></li>
</ul>
</li>
<li>
<a href="#" id="dieta"></a>
<ul class="dieta">
<li><a href="#">Dieta mediterránea</a></li>
</ul>
</li>
</ul>
</div>

Hoja de estilos:

#menu {
width: 825px;
height: 261px;
/*margin: 0 auto auto 5%;*/
background-image: url(menu.jpg);
background-repeat: no-repeat;
position:relative;
/*z-index:100;*/
}

#menu ul li a, #menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
line-height:20px;
font-size:11px;
overflow:hidden;
font-weight: normal;
}
#menu ul {
padding:0;
margin:0;
list-style: none;

}

#menu > ul > li {
float:left;
position:relative;
}
#menu ul li ul {
display: none;
}

#menu ul li:hover ul {
display:block;
position:absolute;
width: 150px;

}
ul.aceite {
top: -30px;
}

ul.vinos {
top: -30px;
left: 50px;
}

ul.vinos li a{
padding-bottom: 50px;
}

ul.jamon {
top: 50px;
left: 155px;
}

.hdp {
position: relative;
left: 30px;

}

ul.jamon li a{
padding-left: 30px;
}

ul.quesos{
top: 30px;
left: 60px;
}

ul.aceitunas{
top: 100px;
left: 50px;

}

ul.aceitunas li a{
padding-top: 20px;
}

ul.dieta{
top: 80px;
left: 140px;
}

#menu ul li ul.dieta li a:link, #menu ul li ul.dieta li a:visited, #menu ul li ul.vinos li a:link, #menu ul li ul.vinos li a:visited, #menu ul li ul.aceitunas li a:link, #menu ul li ul.aceitunas li a:visited {
color:#C00;
font-size: 11px;
font-weight: bold;
line-height:20px;
}


#menu ul li:hover ul li a {
display:block;
color:#333;
}

#menu ul li:hover ul li a:hover {
color:#999;
}

#menu ul li ul li {
color:#C00;
font-size: 11px;
font-weight: bold;
line-height:20px;
}



#menu a#aceite {
width: 258px;
height: 143px;
float: left;
}

#menu a:hover#aceite {
background-image: url(aceite_ov.jpg);
background-repeat: no-repeat;
background-position: -1px -1px;
}

#menu a#vinos {
width: 167px;
height: 143px;
float: left;
}

#menu a:hover#vinos {
background-image: url(vinos_ov.jpg);
background-repeat: no-repeat;
background-position: -1px -1px;
}

#menu a#jamon {
width: 165px;
height: 143px;
float: left;
}

#menu a:hover#jamon {
background-image: url(jamon_ov.jpg);
background-repeat: no-repeat;
background-position: 0px -1px;
}

#menu a#quesos {
width: 425px;
height: 118px;
float: left;
}

#menu a:hover#quesos {
background-image: url(quesos_ov.jpg);
background-repeat: no-repeat;
background-position: 160px -1px;
}

#menu a#aceitunas {
width: 145px;
height: 118px;
float: left;
}

#menu a:hover#aceitunas{
background-image: url(aceitunas_ov.jpg);
background-repeat: no-repeat;

}

#menu a#dieta {
width: 255px;
height: 118px;
float: left;
}

#menu a:hover#dieta{
background-image: url(dieta_ov.jpg);
background-repeat: no-repeat;
background-position: 1px 0px;
}

Muchas gracias!!

[Calizman]

Dios mio! Cuando veremos esto... Saludos ddest!!

Mejor entra a http://www.araudi.net/
Cortesia de nuestro amigo Mikmoro! y busca ahi los navegadores que desees... creo que sera mejor! =D

Saludos y Suerte!

PD: para la proxima... especifica mas tu problema si? no sabemos cual es el problema... no podemos ayudarte!

[ddest]

Gracias CALiZzZ! ya he probado con los consejos de Mikmoro y no funcionan en IE 6, ni en IE7.
He generado unos botones con imágenes y al hacer el hover se desplazan para donde quieren, esto ocurre en IE6 y en IE7.
He buscado por todos lados una solución más sencilla pero no la encuentro! Gracias igual!!!

[Mikmoro]

Iniciado por ddest

Gracias CALiZzZ! ya he probado con los consejos de Mikmoro y no funcionan en IE 6, ni en IE7.

¿Podrías explicarte mejor? Lo digo para no confundir a la gente, porque excepto que ponga lo contrario, creo que todo lo que hay publicado en mi web referente a menús es compatible con IE6 y 7.

En tu caso, de entrada:

#menu > ul > li {
float:left;
position:relative;
}
#menu ul li:hover ul {
display:block;
position:absolute;
width: 150px;
}

En IE6 al menos no puede funcionar, porque no sabe interpretar ni "hijo de" (>) ni el :hover para otro elemento que no se un enlace.

Y como dice Caliz, no sabemos exactamente cuál es el problema, o qué es lo que no funciona.

[Calizman]

Realmente yo no vi esos errores pues no lei todo el CSS ni el HTML por el mismo problema que decia... Cual es tu problema? Hasta no saber tu problema... no podremos darte la solucion!

Suerte y Saludos!

[ddest]

Mikmoro, disculpa tienes razón, quizás me expresé mal, incorporé a mi desarrollo tus consejos, pero por lo que me marcas en tu mensaje ha sido por eso que no funcionaba.

Me he expresado mal, te pido disculpas tus aportes son muy valiosos! El error es mio.

Gracias igual!

[Mikmoro]

No, no te preocupes. La cosa era saber si había algo raro por ahí.

Si tienes alguna duda ya consultarás.

Saludos.