title: how to hide a div on mouseleave from 2 divs in jquery?
body: <p>the question might be a bit wired but in other words i have a menu (see <a href="http://jsfiddle.net/patrioticcow/fmTnh/1/" rel="nofollow">jsfiddle</a>)</p>
  
  <p>when i hover over a div i get a drop down. when i mouseleave the drop down disappear. so far so good.</p>
  
  <p>the problem is that i want the menu to stay open if the mouse is hovering over the drop down also.</p>
  
  <pre><code>ex: if($elem).not(":hover"){..}
  </code></pre>
  
  <p>some code:</p>
  
  <pre><code>&lt;div class="top_menu_item"&gt;
      &lt;div class="hover_item"&gt;
          &lt;a href="#"&gt;TEST&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="drop_item" style="display: none;"&gt;
          &lt;div&gt;
              &lt;a href="#"&gt;My test&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=""&gt;
              &lt;a href="#"&gt;Add test&lt;/a&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;a href="#"&gt;Remove test&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  $(document).ready(function () {
      var elem = new Array();
      var len = $(".hover_item").length;
      var i = 0;
      while (i &lt; len) {
          elem[i] = $(".hover_item:eq(" + i + ")");
  
          i = i + 1;
      }
      $.each(elem, function (key, val) {
          hoverFunc(val);
      });
  
  });
  
  function hoverFunc($elem) {
  
      $elem.hover(function () {
          if ($elem.next().is(":hidden")) {
              $elem.next().slideDown("fast");
          }
      });
  
      $elem.mouseleave(function (e) {
          // here should be :  if the mouse is not hovering over the dropdown, then
          $elem.next().slideUp("fast");
      });
  
      $elem.next().mouseleave(function (e) {
          $elem.next().slideUp('fast');
      });
  }
  </code></pre>
  
  <p>if someone can re-Fraze my question to say what i mean please do so. </p>
  
  <p>thanks</p>