Hola chicos/as
Estoy intentando hacer una menú desplegable y me encuentro con el siguiente problema, visualiza todos los menús en la misma posición.
Os indico el código, más vale una imagen que mil palabras.
...
<style type='text/css'>
.ancla{position: relative; visibility:true;}
</style>
function verMenu(menu,ancla){
ocultarMenus();
menu.style.left=ancla.style.left;
menu.style.top=ancla.style.top+60;
menu.style.visibility="visible";
}
...
<body>
<table width="500" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<div id=opm1 class="ancla">
<a href="#" onMouseOver="verMenu(menu1,this);">menu1</a></div></td>
<td align="center">
<div id=opm1 class="ancla">
<a href="#" onMouseOver="verMenu(menu2,this);">menu2</a></div></td>
<td align="center">
</tr>
</tbody>
</table>
<div id="menu1" style="position:absolute; width:200px;
height:115px; visibility:hidden; z-index:1; left: 1;">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr><td>Opc1_1</td></tr>
<tr><td>Opc2_1</td></tr>
<tr><td>Opc3_1</td></tr>
</tbody>
</table>
</div>
<div id="menu2" style="position:absolute; width:200px; height:115px;
visibility:hidden; z-index:1; left: 1; top: 1;">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr><td>Opc1_2</td></tr>
<tr><td>Opc2_2</td></tr>
<tr><td>Opc3_2</td></tr>
</tbody>
</table>
</div>
</body>
Un saludo y gracias