Hola foristas, este es mi codigo:
Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin:0;}
ul {margin:0;padding:0;}
li {list-style:none;}
div.principal {width:700px;}
div.izq {width:100px;float:left;position:relative;background:#FF0000;}
div.cen {width:500px;float:left;position:relative;}
div.menu {width:100%;}
div.menu ul li {position:relative;}
div.menu ul li a {display:block;position:relative;line-height:18px;}
div.menu ul li a:hover {background:#DAD3D3;}
div.menu ul li ul {width:100px;display:none;position:absolute;left:100px;top:0;z-index:2;}
div.add {width:300px;position:relative;background:#00CCCC;}
div.add2 {width:300px;position:relative;background:#CCFF33;}
</style>
<script language="JavaScript">
function prueba(llama)
{
var aaa = llama.parentNode.getElementsByTagName('ul')[0];
aaa.style.display = aaa.style.display == 'block' ? 'none' : 'block' ;
}
</script>
</head>
<body>
<div class="principal">
<div class="izq">
<div class="menu">
<ul>
<li onMouseOver="prueba(this)" onMouseOut="prueba(this)"><a href="#">PRUEBA MENU</a>
<ul>
<li><a href="#">aaaaaa</a></li>
<li><a href="#">bbbbbb</a></li>
<li><a href="#">cccccc</a></li>
</ul>
</li>
<li><a href="#">PRUEBA NADA</a></li>
</ul>
</div>
</div>
<div class="cen">
<div class="add">
prueba prueba prueba prueba<br>
prueba prueba prueba prueba<br>
prueba prueba prueba prueba<br>
prueba prueba prueba prueba<br>
</div>
<div class="add2">
agregar agregar agregar <br>
agregar agregar agregar <br>
agregar agregar agregar <br>
agregar agregar agregar <br>
</div>
</div>
</div>
</body>
</html> Es simple para que puedan ver el problema. Yo del lado izquierdo tengo un javascript que al pasar el mouse por arriba me aparece un submenu. En FF funciona bien ponerle z-index al <ul> que sería el submenu, pero en IE no se superpone, como que queda tapado... como lo puedo solucionar ??
Espero puedan entender el problema y desde ya muchísimas gracias.
Saludos