title: jQuery mouseover and mouseleave drop down menus
body: <p>The following displays a menu: </p>
  
  <pre><code>&lt;a href="#" id="cityclick"&gt;ONZE WAARDEN&lt;/a&gt;
  
  &lt;div id="citydrop"&gt;
      &lt;div class="dropbottom"&gt;
          &lt;div class="dropmid"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;ITC&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;CLUB&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;CULTUUR&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;ROBITICA&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The jQuery for is as follows :</p>
  
  <pre><code>$("#citydrop").hide();
  
  $("#cityclick").mouseover(function () {
      $("#citydrop").slideDown('slow');
  });
  
  $("#citydrop").mouseleave(function () {
      $("#citydrop").slideUp('slow');
  });
  </code></pre>
  
  <p><strong>PROBLEM:</strong>
  I'm not able to figure out how to toggle the submenu "citydrop" when the mouse leaves "cityclick" but does not enter "citydrop" yet.</p>
  
  <p>I tried out here <a href="http://jsfiddle.net/9yEHV/">jsfiddle</a></p>