Hiding multiple divs using setTimeOut

In an effort to improve my javaScript skills I've written a *basic* script to show popup menu's underneath a row of hyperlinks.  The idea is that once the cursor moves away from the hyperlink/displayed menu, then after a short delay the menu disappears.

The problem is that if I hover over 1 link, then immediately hover over another, the first popup menu never disappears because the first timer gets overwritten by the second timer.

Therefore, can anyone help me fine tune this script to correct make each popup menu disappear after a given time delay?

<script type="text/javascript">
            /* <![CDATA[ */
            var counterVar;
            
            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 = '';
                        window.clearTimeout(counterVar);
                  }
            }
            
            function startCountDownForHidingMenu(hoverMenuID){
                  if (document.getElementById(hoverMenuID)) {
                        counterVar = window.setTimeout("hideMenu('"+hoverMenuID+"')", 1000);
                  }
            }
            
            function hideMenu(hoverMenuID){
                  var menu = document.getElementById(hoverMenuID);
                  if (menu) {
                        menu.style.display = 'none';
                  }
            }
            
            function findPos(obj) {
                  // omitted for brevity
            }
            /* ]]> */
      </script>