javascript pop-up menu help

Question

I am working on a project similar to a table where the user will be able to add rows. Right now there is just one row type available but I would like to give the user the ability to select from a list without changing the layout of the page. So, I put together a menu that appears on mouseover of the 'add row' link and disappears on mouseout (with a slight delay and fade in/out) using mootools event listeners. It looks like:

I am now trying to figure out an easy way to make it so that the list stays available when the user's mouse leaves the 'add a row' link to go to select an item from the list. I looked through various mootools add-ons and tutorial but didn't find anything all that helpful. Does anyone know of a good tutorial guide me through this or can otherwise point me in the right direction here?

EDIT: 4/18 - I just ran into:

http://www.consideropen.com/blog/2008/10/smart-hover-box-for-mootools-12-v1/

which works very well for what I need to get done. Maybe some day i'll feel comfortable enough to write my own code... thanks for the suggestion.

Answer 1

when you display the menu - add an onmousemove event listener to document.body - check the element which triggered the event, if its the menu or the 'add a row link' do nothing, otherwise close the menu and stop the event listener

Sorry, I don't know mootools well enough to give the syntax