Hola:
Estoy Tratando de Hacer un menu desplegable al momento de pasar sobre un link con el siguiente codigo:
<html>
<head>
<style type = "text/css">
<!--
dl, dt, dd, ul, li{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu{
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 50%; //Area de Operacion
}
#menu dl{
float: left;
width: 7em;
}
#menu dt{
font-family:Tahoma;
cursor: pointer;
color: white;
font-weight: bold;
font-size: 12;
text-align: center;
background: #fff;
height: 23px;
width: 10em;
border: 3px solid white;
margin: 0;
}
#menu dd{
display: none;
width: 10em;
border: 1px solid white;
}
#menu li{
text-align: center;
background: #000;
color: white;
}
#menu li a, #menu dt a{
text-decoration: none;
color: white;
background: #000;
display: block;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus{
background: #eee;
font-weight: bold;
}
-->
</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'
}
}
//-->
</script>
<title>Menu</title>
</head>
<body onclick = "javascript
:showMenu('')">
<div id="menu">
<dl>
<dt>Menu</dt>
<dd id = "subMenu1">
<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>
</div>
<a href = "#" onmouseover = "javascript
:showMenu('subMenu1')" onmouseout="javascript
:showMenu('')">HOLAAAAAA</a>
</body>
</html>
Pero como se puede ver, he utilizado listas de definición y lo que yo quiero, es que al pasar el mouse sobre el link, salga desde ahi el menu, no desde la <dt>
Como se puede hacer eso en javascript ??
Gracias de ante mano.