title: jQuery dropdown menu with setTimeout does not work
body: <p>I know this questions being asked many times already but I can not make my drop down menu work with what I have so far. The problem appears if I set delay for menu to show, without setTimeout the menu works just fine. Could anyone take a look and suggest the solution please? I am also trying that it works in IE6.</p>
  
  <ul>
  <li><p>Here is the full example with setTimeout:
  <a href="http://jsbin.com/owoyon/1/" rel="nofollow">http://jsbin.com/owoyon/1/</a> (bugged, does not work correct, drop downs get stuck, delay is not recognized)</p></li>
  <li><p>here is a working version without setTimeout
  <a href="http://jsbin.com/isamay/1/" rel="nofollow">http://jsbin.com/isamay/1/</a></p></li>
  </ul>
  
  <p>and here is a code copy:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="no-js"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;style&gt;
      body {margin:60px; font-family: sans-serif; font-size:12px;}
      ul,ul ul {margin:0;padding:0;} 
      ul li {
          position:relative;
          list-style-type: none;
          padding:5px 0;
          margin:0 10px;
          cursor:pointer;
          border-bottom:1px solid #ddd;
          display:inline-block;
          float:left;     
      }
      .submenu {
          background:#eee;
          display:none;
          position:absolute;
          width:200px;        
          top:25px;
          left:0;
          margin-left:-5px;
      }
      .hover {
          display:block !important;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;nav id="navigation"&gt;
  &lt;ul&gt;
      &lt;li class="drop"&gt;Option 1
          &lt;div class="submenu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/li&gt;
                  &lt;li&gt;Aliquam tincidunt mauris eu risus.&lt;/li&gt;
                  &lt;li&gt;Vestibulum auctor dapibus neque.&lt;/li&gt;
                  &lt;li&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/li&gt;
              &lt;/ul&gt;          
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="drop"&gt;Option 2
      &lt;div class="submenu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/li&gt;
                  &lt;li&gt;Aliquam tincidunt mauris eu risus.&lt;/li&gt;
                  &lt;li&gt;Vestibulum auctor dapibus neque.&lt;/li&gt;
                  &lt;li&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/li&gt;
              &lt;/ul&gt;          
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  $(document).ready(function(){
  
      (function(){
  
          var topNav = $('#navigation'),
              drop = topNav.find('.drop'),
              myTimer;                
  
          drop.hover(function(){                  
              obj = $(this);                      
              subMenu = obj.find('.submenu');         
              subMenu.addClass('hover');  
              clearTimeout(myTimer);              
          },function(){
              myTimer = setTimeout(function(){                
                  subMenu.removeClass('hover');   
              },300);                                             
          });     
  
      })();   
  
  });
  
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>