Hola! Qué tal?
Tengo un menú con submenúes desplegables que funciona con jQuery. El submenú es un div con display: none; que lo muestro al pasar el mouse por encima del link del menú.
El problema es que en IE6 se ve corrido, en vez de verse debajo del link del menú, se ve al costado derecho, justo donde termina la caja del link del menú.
El link para que vean lo que digo es:
http://estudiopronet.com/clientes/santaana/5/
En HTML tengo:
Código HTML:
<div id="menuHeader">
<a href="./">Inicio</a>
<div class="contenedorSubmenu">
<a href="#">Farmacia</a>
<div class="submenu">
<a href="promociones-del-sector.php">Promociones del sector</a>
<a href="prepagas.php">Obras Sociales y Prepagas</a>
<a href="http://www.salud.mendoza.gov.ar/archivos/fcia_turnos/Lujan.pdf" target="_blank">Turnos</a>
</div>
</div>
<div class="contenedorSubmenu">
<a href="#">Perfumería y Dermocosmética</a>
<div class="submenu">
<a href="fragancias.php">Fragancias</a>
<a href="eventos-perfumeria.php">Calendario de eventos</a>
</div>
</div>
<a href="promociones.php">Promociones</a>
<div class="contenedorSubmenu">
<a href="#">Grupo Bienestar</a>
<div class="submenu">
<a href="grupo-bienestar.php">Requisitos y adquisición</a>
<a href="http://grupobienestar.com.ar/contents/services" target="_blank">Servicios</a>
<a href="http://grupobienestar.com.ar/" target="_blank">Sitio oficial</a>
</div>
</div>
<div class="contenedorSubmenu">
<a href="vacunatorio.php">Vacunatorio</a>
<div class="submenu">
<a href="vacunatorio.php">Horario y lugar de colocación</a>
<a href="info-vacunatorio.php">Información</a>
</div>
</div>
<a href="contacto.php">Contacto</a>
<a href="login.php">Acceso Clientes</a>
</div> Los que tienen submenú son los que están dentro de <div class="contenedorSubmenu">
Y en CSS tengo:
Código:
#menuHeader {
background-color: #00984A;
padding: 0px;
height: 40px;
width: 980px;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #33AD6E;
}
#menuHeader a:link, #menuHeader a:visited {
color: #FFF;
text-decoration: none;
display: block;
float: left;
padding-right: 15px;
padding-left: 15px;
height: 30px;
padding-top: 10px;
margin-top: -10px;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #33AD6E;
}
#menuHeader a:hover {
border-top-color: #CCEADB;
color: #00984A;
background-color: #E5F4ED;
}
#menuHeader a.linkHover {
border-top-color: #CCEADB;
color: #00984A;
background-color: #E5F4ED;
}
.contenedorSubmenu {
float: left;
width: auto;
}
#menuHeader .submenu{
position: absolute;
top: 280px;
display: none;
background-image: url(../images/bgMenu.png);
font-size: 11px;
width: auto;
}
#menuHeader .submenu a {
float: none;
margin: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
height: 25px;
}
#menuHeader .submenu a:hover {
color: #00984A;
background-color: #000;
}
Qué es lo que tendría que modificar para que se vea bien en todos los exploradores? Imagino que hay alguna propiedad CSS que IE6 no interpreta de la manera correcta.
Espero que alguien pueda ayudarme. Saludos.