Hola a todo el foro:
Estoy realizando un ejercicio de un menu multinivel, y llegado al punto de tener que ocultar los submenu utiliza la propiedad oveflow sobre el li del enlace ocultandolo o haciendolo visible segun el hover sobre el li
Funciona bien tanto en FF como en IE7 pero no funciona en Opera 9.0 y 7.23 (en cada una de estas dos versiones se ve distinto) No comprendo por que ni por supuesto como se puede solucionar
Acudo a vuestra ayuda
Os pego el html y el css
Un saludo
HTML
<ul id="menu">
<li class="menuitem" id="m1"><a href="#">Enlace 1</a>
<ul>
<li><a href="#">enlace 1.1</a></li>
<li><a href="#">enlace 1.2</a></li>
<li><a href="#">enlace 1.3</a>
<ul>
<li><a href="#">enlace 1.3.1</a></li>
<li><a href="#">enlace 1.3.2 </a>
<ul>
<li><a href="#">enlace 1.3.2.1</a></li>
</ul>
</li>
<li><a href="#">enlace 1.3.3</a></li>
</ul>
</li>
<li><a href="#">enlace 1.4</a>
<ul>
<li><a href="#">enlace 1.4.1</a></li>
<li><a href="#">enlace 1.4.2</a></li>
<li><a href="#">enlace 1.4.3</a></li>
</ul>
</li>
</ul>
</li>
<li class="menuitem" id="m2"><a href="#">Enlace 2</a>
<ul>
<li><a href="#">enlace 2.1</a></li>
<li><a href="#">enlace 2.2</a></li>
<li><a href="#">enlace 2.3</a></li>
<li><a href="#">enlace 2.4</a></li>
</ul>
</li>
<li class="menuitem" id="m3"><a href="#">Enlace 3</a>
<ul>
<li><a href="#">enlace 3.1</a></li>
<li><a href="#">enlace 3.2</a>
<ul>
<li><a href="#">enlace 3.2.1</a></li>
<li><a href="#">enlace 3.2.2</a></li>
</ul>
</li>
<li><a href="#">enlace 3.3</a></li>
<li><a href="#">enlace 3.4</a></li>
</ul>
</li>
<li class="menuitem" id="m4"><a href="#">Enlace 4</a>
<ul>
<li><a href="#">enlace 4.1</a></li>
<li><a href="#">enlace 4.2</a></li>
<li><a href="#">enlace 4.3</a></li>
<li><a href="#">enlace 4.4</a></li>
</ul>
</li>
<li class="menuitem" id="m5"><a href="#">Enlace 5</a>
<ul>
<li><a href="#">enlace 5.1</a></li>
<li><a href="#">enlace 5.2</a></li>
<li><a href="#">enlace 5.3</a></li>
<li><a href="#">enlace 5.4</a></li>
</ul>
</li>
</ul>
CSS
#menu{
position:relative;
list-style-type:none;
}
#menu a{
font-family:Arial, Helvetica, sans-serif;
font-size:11pt;
display:block;
color:#336699;
text-align:center;
text-decoration:none;
padding:0.2em 0.5em;
}
#menu a:hover{
background-color: #4487C2;
color: #FFF;
}
.menuitem{
position:absolute;
margin:0;
padding:0;
width:10em;
height:26px;
overflow:hidden;
}
EL FALLO POSIBLEMENTE ESTE AQUI, PERO ¿POR QUE NO FUNCIONA EN OPERA?
.menuitem:hover{
overflow:visible;
}
.menuitem ul{
padding:0;
list-style-type:none;
}
#m1 { left: 0; }
#m2 { left: 9.95em; }
#m3 { left: 19.85em; }
#m4 { left: 29.80em; }
#m5 { left: 39.75em; }