Hiding multiple divs using setTimeOut

>> The only case I can see where it might be an issue would be if you mouseover the item that you just moused out of, but off the top of my head

Yes that was the reason.  I didn't want menu's popping up that refused to disappear again!  My JS skills aren't too great so I was trying to keep it simple, but as long as I understand any answers here that make it work better then that's great!

>> I didn't want menu's popping up that refused to disappear again!
I think the issue would actually be the opposite.  Since the timeout is set, it would hide the menu after a second, even if you just finished mousing back over that item.

So, I'd suggest keeping the ID of the item that's going to disappear.  If it matches the ID of the item you moused over, then you clear the timeout.  Otherwise, you can leave the timeout alone, and it'll do its thing.

Give this a shot as a means to implement that:
<script type="text/javascript">
            /* <![CDATA[ */
            var counterVar;
            var idToBeHidden;
           
            function displayMenu(hoverMenuID, linkID){
                  var menu = document.getElementById(hoverMenuID);
                  if (menu) {
                        var positionToShowArray = findPos(linkID);
                        menu.style.left = positionToShowArray[0] + 'px';
                        menu.style.top = positionToShowArray[1] + 'px';
                        menu.style.display = '';
                        if (hoverMenuID == idToBeHidden)
                        {
                          window.clearTimeout(counterVar);
                          idToBeHidden = null;
                        }
                  }
            }
           
            function startCountDownForHidingMenu(hoverMenuID){
                  if (document.getElementById(hoverMenuID)) {
                        counterVar = window.setTimeout("hideMenu('"+hoverMenuID+"')", 1000);
                        idToBeHidden = hoverMenuID;
                  }
            }
           
            function hideMenu(hoverMenuID){
                  var menu = document.getElementById(hoverMenuID);
                  if (menu) {
                        menu.style.display = 'none';
                  }
            }
           
            function findPos(obj) {
                  // omitted for brevity
            }
            /* ]]> */
      </script>

I haven't had time to test the above (sorry, it's been a hectic day), but the idea is that you set a global ID variable whenever you set the timeout.  When you go to mouse over, you only clear the timeout if the ID of the item you moused over matches the global ID variable.  If they don't match, then you're dealing with separate menu items, and it's safe to hide.  

If you have issues, let us know.  Regardless, hope that helps.

Hi dakyd,
Thanks for the post.  It does correctly hide the menus as I hoped, but there is one small problem:

The menus disappear when the mouse is hovered over the links within them.  So, the hover menu appears okay, but when you hover over a hover-menu link, the menu disappears (if that makes sense?)

It might be caused by the way I call the functions, but I'm confused...!

What does the HTML look like for one of the menu items?  Also, how are the functions being called?  I can take a few educated guesses about the javascript, but not the HTML.

Link to make the hover menu appear:

<a id="navbarLink05" onmouseover="displayMenu('about_hover', this)" onmouseout="startCountDownForHidingMenu('about_hover')" href="aboute4.aspx">About</a>

The hover menu div is like this:

<div id="products_hover" style="display:none;" onmouseover="displayMenu(this, 'navbarLink05')">
 <ul>
  <li>Link01</li>
  <li>Link02</li>
  <li>Link03</li>
 </ul>      
</div>

So where is the <a> in relation to the <div> that contains the sub-menu?

It looks like you're already using a list for the sub-menu items, is the <a> also a part of a list structure?

Yes the link is part of a list of links.  There are 2 hover menu div's, and these are directly underneath the link-list in the code, although their CSS rules dictate they obviously aren't shown.    The function called findPos(obj) places and displays each hover menu is the correct place.