Adding a delay to a cascading menu mouseout

Adding a delay to a cascading menu mouseout

Hello Forum,
Thanks in advanced for your help!

I am working on a website that requires a cascading navigation system. I got the following code from www.dynamicdrive.com and have tweaked a few things to work for my needs

  2. //Nested Side Bar Menu (Mar 20th, 09)
  3. //By Dynamic Drive: http://www.dynamicdrive.com/style/

  5. var menuids = ["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

  7. function initsidebarmenu() {
  8.     
  9.     for (var i = 0; i < menuids.length; i++) {
  10.         var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")
  11.         for (var t = 0; t < ultags.length; t++) {
  12.             ultags[t].parentNode.getElementsByTagName("a")[0].className += " subfolderstyle"
  13.             if (ultags[t].parentNode.parentNode.id == menuids[i]) //if this is a first level submenu
  14.                 ultags[t].style.left = ultags[t].parentNode.offsetWidth + "px" //dynamically position first level submenus to be width of main menu item
  15.             else //else if this is a sub level submenu (ul)
  16.                 ultags[t].style.left = ultags[t - 1].getElementsByTagName("a")[0].offsetWidth + "px";  //position menu to the right of menu item that activated it

  18.             ultags[t].parentNode.onmouseover = function() 
  19.             {
  20.                 this.getElementsByTagName("ul")[0].style.display = "block";
  21.             }
  22.             ultags[t].parentNode.onmouseout = function() 
  23.             {
  24.                 this.getElementsByTagName("ul")[0].style.display = "none";
  25.             }
  26.         }
  27.         for (var t = ultags.length - 1; t > -1; t--) { //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  28.             ultags[t].style.visibility = "visible";

  30.             ultags[t].style.display = "none";
  31.         }
  32.     }
  33. }

  35. if (window.addEventListener)
  36.     window.addEventListener("load", initsidebarmenu, false)
  37. else if (window.attachEvent)
  38.     window.attachEvent("onload", initsidebarmenu)


The problem i am facing is that the onmouseout action is happening too fast. When the user moves the mouse out of the list item element, the navigation sub-items disappear too quickly. I need to find a way to slow their disappearance. I have tried adding setTimeout as well as setInterval where i se the the style display to none. However this is not working.

I would appreciate any assitance you may give in letting me know how i can set a specific delay for the item to disappear after the user has moved the mouse out of the element.

Thank you.