Hola:
He hecho un menu desplegable es javascript.
En firefox, al pasar el mouse sobre las opciones, todo esta bien.
Pero en Internet Explorer ocurre que cuando paso el mouse sobre la primera opcion, se corren las otras opciones.
¿Como puedo hacer para evitar eso ??
Aqui esta el Codigo:
<html>
<head>
<style type = "text/css">
<!--
dl, dt, dd, ul, li{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu{
position: absolute;
top: 15px;
left: 15px;
z-index: 100;
width: 100%; //Area de Operacion
}
#menu dl{
float: left;
//width: 7em;
margin: 0;
}
#menu dt{
font-family:Tahoma;
color: white;
font-weight: bold;
font-size: 12;
text-align: center;
background: #000;
height: 23px;
margin: 0;
//border: 1px solid white;
}
#menu dd{
display: none;
width: 7em;
//border: 1px solid white;
}
#menu li{
text-align: center;
background: #C0C0C0;
color: white;
}
#menu li a{
text-decoration: none;
color: #7C67A7;
font-family: Tahoma;
font-weight: bold;
font-size: 14;
background: #C0C0C0;
display: block;
border: 1px solid white;
height: 2em;
left: 35px;
}
#menu dt a{
text-decoration: none;
text-align: center;
color: white;
background: #000;
display: block;
width: 3em;
}
#menu dt a:hover{
text-decoration: none;
color: white;
background: #000;
display: block;
}
#menu li a:hover, #menu li a:focus{
font-weight: bold;
font-size: 14;
text-decoration: underline;
border: 3px solid #fffbfb;
}
-->
</style>
<script type = "text/javascript">
<!--
window.onload = showMenu // Ocultando el todos los Submenu al para que no se vean cuando cargue la pagina
function showMenu(id)
{
var d = document.getElementById(id)
/* Ocultando los Submenu donde no ocurrio el evento mouseover */
for(var i=1; i<=10;i++)
{
if(document.getElementById('subMenu'+i))
{
document.getElementById('subMenu'+i).style.display = 'none'
}
}
/* Mostrando el Menu */
if(d)
{
d.style.display = 'block'
}
}
function mensaje(mensaje)
{
alert(mensaje)
}
//-->
</script>
<title>Menu</title>
</head>
<body onclick = "javascript:showMenu('')" bgcolor = "#ffffff">
<div id="menu">
<dl style = "width:2.1em;">
<dt><a href = "#" onmouseover = "javascript:showMenu('subMenu1')">Menu</a></dt>
<dd id = "subMenu1" onmouseover = "javascript:showMenu('subMenu1')" onmouseout = "javascript:showMenu('')">
<ul>
<li><a href = "#"> Opcion 1 </a></li>
<li><a href = "#"> Opcion 2 </a></li>
<li><a href = "#"> Opcion 3 </a></li>
<li><a href = "#"> Opcion 4 </a></li>
</ul>
</dd>
</dl>
<dl style="width:30px;">
<dt><a href = "#" style="cursor:default;">|</a></dt>
</dl>
<dl style = "width:60px;">
<dt><a href="#" onmouseover = "javascript:showMenu('subMenu2')">Menu2</a></dt>
<dd style = "width:15em;" id = "subMenu2" >
<ul>
<li>
<a href = "#"> opcion 2.1</a>
</li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
Gracias de Ante mano.
