Drop down menu positioning

[Pinpoint]

Hi,

I'm trying to develop a drop down menu bar - where there is a row of buttons across the top of the page, and when you move the mouse over one of them a sub-menu drops down, lined up with the button. I am having trouble getting the sub-menu to line up with the button, especially if the window size changes.

The relevant bit of the function to draw the drop-down menu is :

function Menu(current) {
m = document.getElementById("menu-" + current);
boxes = document.getElementById(current);
boxes.style.offsetLeft = m.offsetLeft;
boxes.style.offsetTop = m.offsetBottom;
boxes.style.visibility = "visible";
boxes.style.width = m.width;
}

A sample menu button defn:

<td ID=&quot;menu-utilities&quot; width=&quot;120&quot; align=&quot;center&quot;
onMouseOver=&quot;Menu('utilities'); document.images[0].src='utilbut2.gif';&quot;
onMouseOut=&quot;Timeout('utilities'); document.images[0].src='utilbut1.gif';&quot;>
<img src=&quot;utilbut1.gif&quot;>
</td>

A sample menu:

<div ID=&quot;utilities&quot; STYLE=&quot;position: absolute; visibility: hidden; &quot;>
<table width=&quot;120&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr height=&quot;5&quot; width=&quot;120&quot;>
<td height=&quot;5&quot; align=&quot;center&quot; ID=&quot;ut1&quot; valign=&quot;top&quot;
onMouseOver= ......
onMouseOut = .......
onClick = ......
>
<img src=&quot;item1but1.gif&quot;>
</td>
</tr>
...... other <tr>.s for other menu items similarly.
</table>
</div>

The offsetTop/offsetLeft settings do not seem to work, ie they do not take the value from the menu button and apply it to the drop-down menu.

Second problem is, the height attributes of both buttons and menus are also being ignored, and the resultant table items are always displayed slightly deeper than the .gif files. Any ideas why ?

Thanks in advance,

Pinpoint