Tambien estoy teniendo un problema similar y no le encuentro solucion. Espero puedan ayudarme.
Tengo un div contenedor, y dentro de el un menu a la izquierda (que se expande ocupando parte del div cont) y un div cont apenas separados unos pixels. Si presiono sobre el menu dentro de este margen de separacion, el comportamiento es el esperado, cuando se expande. Si en cambio presiono para expandirlo, con el mouse sobre la capa cont, se oculta rapidamente haciendo dificil la navegacion. Esto si cont tiene contenido que ocupe toda la pantalla, digamos si no se le coloca nada no.
Con Firefox anda bien, pero no con IE, por lo que llegue a entender que es un problema de implementacion de IE y z-index.
Desde ya muchas gracias por su tiempo y ayuda.
Les paso el codigo:
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#mad {
position: absolute;
margin: 20px 17px 20px 17px;
padding: 0;
left: 0;
right: 0;
top: 0;
width: auto;
height: 95%;
z-index: 0;
}
#msp {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 153px;
height: 107px;
}
#msp p {
margin: 0;
padding: 0;
}
#msp img {
margin: 0;
padding: 0;
}
#enc {
position: absolute;
margin: 0;
padding: 0;
left: 160px;
right: 1px;
top: 0;
width: auto;
height: 107px;
}
#enc p {
margin: 0;
padding: 0;
}
#enc img {
margin: 0;
padding: 0;
}
#menu {
position: absolute;
left: 0;
top: 114px;
width: 153px;
height: auto;
padding: 0;
margin: 0;
z-index: 999;
}
#menu p {
margin: 0;
padding: 0px 2px 6px 6px;
}
#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
font-weight: bold;
width: 153px; /* ancho menu principal */
border-bottom: 1px solid #185B92; /* azul */
}
#menu ul li{
position: relative;
color: white; /* letra blanca */
background-color: #3183A7; /* azulado */
border-bottom: 1px solid #185B92; /* azul */
border-right: 1px solid #185B92; /* azul */
}
/* menu principal con link */
#menu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white; /* letra blanca */
text-decoration: none;
padding: 6px;
}
/* fondo opcion */
#menu ul li a:link, #menu ul li a:visited, #menu ul li a:active{
background-color: #3183A7; /* azulado */
color: white;
}
#menu ul li a:hover{
/* color al resaltar */
background-color: #C2DAE5; /* celeste */
color: #3183A7; /* letra azulado */
}
/* sub menu */
#menu ul li ul{
position: absolute;
width: 153px;
top: 0;
visibility: hidden;
}
#menu a.submenu{
background: url("../img/fdb.gif") no-repeat 97% 50%;
}
/* Holly Hack for IE \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */
#cont {
position: absolute;
margin: 0;
padding: 0;
left: 160px;
right: 1px;
top: 114px;
height: auto;
width: auto;
z-index: 1;
}
#cont p {
margin: 0;
padding: 2px 10px 2px 10px;
}
#cont img {
margin: 0;
}
HTML =>
<html>
<head>
<link media="screen" href="../css/est.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="../js/menu.js"></script>
</head>
<body>
<div id="mad">
<div id="msp">
<p><IMG SRC="../img/msp.gif" WIDTH="153" HEIGHT="107" BORDER="0" ALT="Msp"></p>
</div>
<div id="enc">
<p><IMG SRC="../img/enc.gif" WIDTH="586" HEIGHT="107" BORDER="0" ALT="MSP"></p>
</div>
<div id="menu">
<p>
<ul id="menuu1">
<li><a href="#">Datos Personales</a>
<ul>
<li class="sl">Cargar</li>
<li><a href="#">Visualizar</a></li>
<li><a href="#">EstadÍsticas Perfil</a></li>
</ul>
</li>
<li><a href="#">Datos Académicos</a>
<ul>
<li><a href="#">Promociones</a></li>
<li><a href="#">Calificaciones</a></li>
<li><a href="#">Asistencias</a></li>
<li><a href="#">Tesis</a></li>
<li><a href="#">Titulos</a></li>
<li><a href="#">Informes</a>
<ul>
<li><a href="#">Inf 1</a></li>
<li><a href="#">Inf 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
<br>
</div>
<div id="cont">
<p>Aca va mucho contenido, que tapa la capa menu</p>
</div>
</div>
</body>
</html>