hide menu

[bender78]

I recently found this nice javascript menu :
http://www.siteexperts.com/tips/jperry/ts02/page1.asp

I do however miss one thing, when the user first moves the cursor over a menu-item the sub-menu appears but when the user moves the cursor out of the menu area the sub-menu still is shown.

I was thinking of adding a 'hide' function and implementing it on onmouseout event.

Something like this :
<DIV ID="d1" onmouseout="hide(this,ds1);" onmouseover="show(this,ds1);" class="menu">JavaScript</DIV>

<DIV ID="ds1" onmouseout="hide(this,ds1);" CLASS="submenu" STYLE="display:none">

The hide function need to check whether the cursor actually moves out of the menu-area (that includes both menu-item and sub-menu) and not only moves from d1 to ds1.

Would appreciate some help here. My javascript experience is rather limited Im afraid.

[bender78]

Let me ask two more specific question.

#1. How can I get the coordinates of the mouse cursor at a given time ?

#2. How can I get the area of for instance a <div> tag like ds1 shown in the code below ?

[bender78]

Here is what I've done so far :
http://larsandre.mine.nu/menu2.htm

If you take a look at the source code, under the 'hide' function Im abit stuck. The getElementById() doesnt seem to respond at all.

Would appreciate any input.