onmouseout event doesn't work well with Div and timers

I am trying to keep my div visible while my cursor is still within the div area, and making it invisible again (after a short while) when the cursor moves out of the area.

This would not work:

<div id="menu1"style="display:none;" onmouseout="delayhide_menu(this.id); >

Because for some strange reason, the onmouseout event acts like the onmousemove event. The timer (in the hide_menu function) gets activated when the mouse moves (even though my cursor is still within the div area) and thus my div becomes invisible after a while.

The solution:

<div id="menu1" style="display:none;" onmouseout="delayhide_menu(this.id); onmouseover="display_menu(this.id);">

You need to define a onmouseover event to counter the activation of the onmouseout event whenever the mouse moves within the div. In addition, you need to add more lines of code in the display and hide menu functions concerning the timers.

<script type="text/javascript">

var popupTimerHandle = null;

function display_menu(id) {

var menu_element = document.getElementById(id);

menu_element.style.display = "block";

if (popupTimerHandle != null) {

clearTimeout(popupTimerHandle);

popupTimerHandle = null;

}

}

function hide_menu(id) {

var menu_element = document.getElementById(named);

menu_element.style.display = "none";

}

function delayhide_menu(id) {

popupTimerHandle = setTimeout("hide_menu('" + named + "')", 1500);

}

</script ">