Hola. Mirad, tengo un menu desplegable que hice el otro dia viendo un html y css que habia en este foro.
El problema que tengo es que en firefox y todos los navegadores, al desplegarse el menu vertical en diferentes apartados me sale todo en conjunto que es lo que yo quiero.
En cambio, en IExplorer me separa los apartados en vez de estar todos colapsados.
Os dejo HTML y CSS, me ayudarias muchisimo si sabeis el porque de esto! Creo que se debe a algo de CSS, pero nose, ya e mirado mucho y no se me ocurre nada.
Código HTML:
<!--Menu-->
<div id="menu">
<ul>
<li class="nivel1"><a href="nosotros.html" class="nivel1">Quienes somos</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"> <a href="empresa.html" class="nivel1">Empresa</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="empresa1.html" title="empresa1">Empresa1</a></li> <!--SUBMENU-->
<li><a href="empresa2.html" title="empresa2">Empresa2</a></li> <!--SUBMENU-->
<li><a href="empresa3.html" title="empresa3">Empresa3</a></li> <!--SUBMENU-->
<!--[if lte IE 6]><a href="#" class="nivel2ie">Opción 2.3 »<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="empresa4.html" title="empresa4">Empresa4</a></li> <!--SUBMENU-->
<li><a href="empresa5.html" title="empresa5">Empresa5</a></li><!--SUBMENU-->
<li><a href="empresa6.html" title="empresa6">Empresa6</a></li><!--SUBMENU-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="productos.html" class="nivel1">Productos</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="contacto.html" class="nivel1">Contacto</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<!--Fin menu--> Y el CSS
Código:
* Menu*/
#menu {text-align: center;
font-size: 15px;
font-weight:bold;
width: 960px;
height:35px;
margin-bottom:30px;
}
#menu ul {list-style-type: none;
}
#menu ul li {width: 240px;
}
#menu ul li.nivel1 { float: left;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #64a71c;
border: solid #fff;
border-left:0px;
border-right:0px;
border-top:2px;
border-bottom:0px;
padding: 8px;
position: relative;
}
#menu ul li a.nivel2, #menu ul li a.nivel2ie {color: 4b8e03;
}
#menu ul li a.nivel1, #menu ul li a.nivel2 {display: block!important;display: none;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #4f9008;
color: #FFFFFF;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {width: 240px;
padding: 8px 0px;
border-top-color: transparent;
}
#menu ul li ul li a:hover {border-top-color: #64a71c;
position: relative;
}
#menu ul li ul li ul li a.primera {border-top-color: #4f9008;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
/* End Menu */