title: jQuery hover dependent on two elements
body: <p>I have main navigation and sub navigation that for reasons of design are in separate DIVs. I would like to show the appropriate sub-nav when a main nav item is hovered, which I can do, but I also want to keep the sub-nav open if the user moves their mouse outside of the main nav item and into the sub-nav area.  The last part is the place where I'm getting stuck.</p>
  
  <p>I'm thinking on the hover out I need to do something with setTimeout() and an IF statement, but I have not been able to make any progress in that area.  Is that even an approach worth trying?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="mnav"&gt;
   &lt;ul id="buttons"&gt;
    &lt;li class="one"&gt;&lt;a href="#"&gt;Main 1&lt;/a&gt;&lt;/li&gt;
    &lt;li class="two"&gt;&lt;a href="#"&gt;Main 2&lt;/a&gt;&lt;/li&gt;
    &lt;li class="three"&gt;&lt;a href="#"&gt;Main 3&lt;/a&gt;&lt;/li&gt;
    &lt;li class="four nav-dark"&gt;&lt;a href="#"&gt;Main 4&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt; &lt;!-- /mnav --&gt;
  
  &lt;div id="snav"&gt;
   &lt;ul class="snav-one"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Sub 1.1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Sub 1.2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Sub 1.3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Sub 1.4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Sub 1.5&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Sub 1.6&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;ul class="snav-two"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Sub 2.1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Sub 2.2&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt; &lt;!-- /snav --&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function() {
   $("#buttons li.one, #buttons li.two").hover(function(){
    var subnav = 'ul.snav-' + $(this).attr('class');
  
    $("#snav").slideDown('fast').addClass("open").find(subnav).show();
  
   }, function(e){
    var subnav = 'ul.snav-' + $(this).attr('class');
  
    $("#snav").slideUp('fast').removeClass("open").find(subnav).hide();
   });
  });
  </code></pre>