<style type="text/css" >
 .subs{display:none;width:200px; background-color:Gray;}
</style> 
</head>
<body>
<a id="item1" onmouseout="settimerhide()" onmouseover="itemover()" >menu</a>
 <div id="sub1" class="subs" onmouseout="settimerhide()" onmouseover="subsover()" >
 some sub text<br />
 some sub text<br />
 some sub text
  </div>
  
 <script type="text/javascript" >
     var timershow, timerhide;
     function itemover() {         
         if (timerhide) { window.clearInterval(timerhide); }
         if (document.getElementById("sub1").style.display != "block") {
             timershow = window.setTimeout("document.getElementById('sub1').style.display = 'block';", 200)
         }
     }
     function subsover() {
         if (timerhide) { window.clearInterval(timerhide); }     
      }
     
    
 function settimerhide() {
     timerhide = window.setTimeout("document.getElementById('sub1').style.display = 'none';", 200)
  }     
 </script>
 
</body>
</html>