Hola gente,
estoy tratando de hacer un menu horizontal desplegable, la idea es que cuando se pase el mouse por encima de un menu se despliegue un submenu.
Aca les mando el codigo:
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function mostrar() {
menu.style.visibility = "visible";
}
function ocultar() {
menu.style.visibility = "hidden";
}
</script>
</head>
<body>
<table width="400" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
<!--DWLayoutTable-->
<tr>
<td width="100" height="20" valign="top" bgcolor="#FFFFFF" onmouseover="mostrar()">Menu 1</td>
<td width="100" valign="top" bgcolor="#FFFFFF">Menu 2</td>
<td width="100" valign="top" bgcolor="#FFFFFF">Menu 3</td>
<td width="100" valign="top" bgcolor="#FFFFFF">Menu 4</td>
</tr>
</table>
<table id="menu" width="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000" style=" visibility: hidden">
<!--DWLayoutTable-->
<tr>
<td onmouseout="ocultar()">
<table width="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr>
<td width="100" height="20" valign="top" bgcolor="#FFFFFF">Submenu 1</td>
</tr>
<tr>
<td width="100" height="20" valign="top" bgcolor="#FFFFFF">Submenu 2</td>
</tr>
<tr>
<td width="100" height="20" valign="top" bgcolor="#FFFFFF">Submenu 3</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
El problema que estoy teniendo es que cuando paso el mouse por encima de Menu1 se me despliega el menu pero cuando
quiero ir al submenu, éste se oculta.
He mirado muchos menus y son muy dificiles de seguir por la gran cantidad de codigo, entonces quize empezar a hacerlo desde cero
pero tengo el problema anterior, alguna idea de que puede ser y como solucionarlo?
desde ya muchas gracias