title: Collapse menu with hover/fadeTo
body: <p>This is what I tried: <a href="http://jsfiddle.net/MRMr4/2/" rel="nofollow">http://jsfiddle.net/MRMr4/2/</a></p>
  
  <p>Of course there is a problem.</p>
  
  <p>As you can see, when I move the mouse to the <strong>section</strong> that was displayed just below, the section disappears. How can I change my jQuery so this section only disappears when the mouse out of the <em>#menu</em> or <em>#products</em>?</p>
  
  <pre><code>$('#menu').hover(function(){
      $('#products').fadeTo('fast', 1);
  }, function(){
      $('#products').fadeTo('fast', 0);
  });
  
  $('#products').mouseover(function(){
      $('#products').show();
  }).mouseout(function(){
      $('#products').fadeTo('fast', 0);
  });
  </code></pre>