Drop down menu problem !
Hej...Jeg prøver at lave en dd-menu, der benytter <div>-tags som undermenu´er. Disse er usynlige, men gøres synlige onMouseOver. Mit problem er deres plasering.... Jeg vil IKKE benytte nogle fastlagde punkter ( så som left: 100px; top: 50px; ). Er dette muligt på nogen måde. Her er koden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style5 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #666666; }
.style6 {font-family: Geneva, Arial, Helvetica, sans-serif}
-->
</style>
<script language="javascript">
function pop(su, hvar){
posX = document.getElementById(hvar).offsetLeft;
posY = document.getElementById(hvar).offsetTop;
Y = posY - 26;
submenu = document.getElementById(su).style;
submenu.left = posX - 20;
submenu.top = Y;
submenu.visibility = "visible";
}
function closeAll(element){
document.getElementById(element).style.visibility = "hidden";
}
</script>
</head>
<body>
<table width="100%" border="1" cellpadding="5" bordercolor="#999999" bgcolor="#999999">
<tr align="center" bgcolor="#CCCC99">
<td width="20%"><span class="style5">Punkt 1 </span></td>
<td width="20%" onMouseOver="pop('sub2', 'p2')" onMouseOut="closeAll('sub2')"><div id="p2" style="position:relative;"></div><span class="style5">Punkt 2 </span></td>
<td width="20%" onMouseOver="pop('sub3', 'p3')" onMouseOut="closeAll('sub3')"><div id="p3" style="position:relative;"></div><span class="style5">Punkt 3 </span></td>
<td width="20%"><span class="style5">Punkt 4 </span></td>
<td width="20%"><span class="style5">Punkt 5 </span></td>
</tr>
</table>
<div id="sub2" style="visibility:hidden; position:relative;">
<table width="20%" border="1" cellpadding="5" bordercolor="#666666" bgcolor="#666666">
<tr>
<td align="center" bgcolor="#C0BF9A"><span class="style6">Punkt 2 - 1</span></td>
</tr>
<tr>
<td align="center" bgcolor="#C0BF9A"><span class="style6">Punkt 2 - 2 </span></td>
</tr>
<tr>
<td align="center" bgcolor="#C0BF9A"><span class="style6">Punkt 2 - 3 </span></td>
</tr>
<tr>
<td align="center" bgcolor="#C0BF9A"><span class="style6">Punkt 2 - 4 </span></td>
</tr>
</table>
</div>
<div id="sub3" style="visibility:hidden; position:relative;" onMouseOut="closeAll()">
<table width="20%" border="1" cellpadding="5" bordercolor="#666666" bgcolor="#666666">
<tr>
<td align="center" bgcolor="#C0BF9A"><span class="style6">Punkt 3 - 1</span></td>
</tr>
<tr>
<td align="center" bgcolor="#C0BF9A"><span class="style6">Punkt 3 - 2 </span></td>
</tr>
<tr>
<td align="center" bgcolor="#C0BF9A"><span class="style6">Punkt 3 - 3 </span></td>
</tr>
<tr>
<td align="center" bgcolor="#C0BF9A"><span class="style6">Punkt 3 - 4 </span></td>
</tr>
</table>
</div>
</body>
</html>
