Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/06/2009, 13:05
piretrus
 
Fecha de Ingreso: marzo-2006
Mensajes: 75
Antigüedad: 18 años, 1 mes
Puntos: 1
problema menu ul anidado en ul ie6

Hola a todos, buenas tardes, me pidieron que hiciese un menu desplegable pero con ul anidados en ul i estoy teniendoi unos problemas en ie6 que no se de donde vienen.

Tengo esta estructura:

<div id="menu1">
<div class="opciones">
<ul>
<li><a href="#">Empresa ></a>
<ul id="submenu" style="display:block;">
<li><a href="#">Actividades</a></li>
<li><a href="#">Especialización</a></li>
<li><a href="#">Filosofía</a></li>
<li><a href="#">Estructura</a></li>
<li><a href="#">Equipo humano</a></li>
<li><a href="#">Recursos materiales</a></li>
<li><a href="#">Logros</a></li>
</ul>
</li>
</ul>
</div>
</div>

Y lo controlo con estos estilos:

Código:
#base3 #middle #menu1{ height:24px; padding:18px 23px 0px 26px; _padding:18px 23px 0px 26px; border-bottom:1px solid #fff; width:740px; _width:735px; background:url(../img/fondo_menu_horizontal.png) top left; _filter: alpha(opacity=90); _background:#fff; float:left; position:relative; z-index:10;}

#base3 #middle #menu1 .opciones{position:relative; width:100%;}

#base3 #middle #menu1 .opciones ul{width:100%; list-style:none; padding:0px; margin:0px; float:left;}

#base3 #middle #menu1 .opciones ul li{float:left; font-size:10px; margin-right:25px; position:relative;}

#base3 #middle #menu1 .opciones ul li a{color:#333; font-weight:bold; text-decoration:none;}

#base3 #middle #menu1 .opciones ul li a:hover{color:#f60;}
#base3 #middle #menu1 .opciones ul li.contacto{float:right;}
#base3 #middle #menu1 .opciones ul li.ultimo{margin-right:0px; }

#base3 #middle #menu1 .opciones ul #submenu{background:transparent url(../img/fondo_submenu_horizontal.png) repeat scroll left top; _filter: alpha(opacity=79); _background:#fff; _background-image: none; left:-15px; padding:15px 9px 11px 20px; position:absolute; top:25px; width:160px; border:1px solid red;}

#base3 #middle #menu1 .opciones ul #submenu li{width:100%; display:block; padding-bottom:8px; position:relative;}
En todos los navegadores, ff3, ie8, chrome se ven bien menos en ie6 y ie7, que el submenu no sale porque como el <ul> padre tiene delimitado un alto, pues si el submenu esta más allá de este alto aparece pero no se dibuja porque esta fuera de los limites del ul... Alguien sabe que hago mal?

Muchas gracias!