title: How to fade a div out with jQuery and have it stay faded while mouse is over child elements of the original trigger?
body: <p>I have a login form in a div on the homepage of a new site, this form also appears in the dropdown navigation.  I would like to panel in the main content of the page to fade out while:</p>
  
  <ul>
  <li>the mouse is hovered over the main dropdown link</li>
  <li>also while the mouse is over the dropdown menu prtion [i.e. filling out the dropdown form]</li>
  </ul>
  
  <p>What I have is: </p>
  
  <pre><code>$('.login-toggle').hover(function(){
          console.log('hover in');
          $('.splash .login-panel').stop().fadeOut();
      },function(){
          console.log('hover out');
          $(".splash .login-panel").stop().fadeIn();
      });
  </code></pre>
  
  <p>Which does work, however as soon as the mouse leaves the a element, the main content form reappears.</p>
  
  <p>here is the login dropdown.</p>
  
  <pre><code>&lt;!-- login --&gt;
  &lt;li class="has-submenu" &gt;
       &lt;a href="#" class="login-toggle"&gt;Login&lt;/a&gt;
       &lt;ul class="submenu menu vertical mega-submenu-login" data-submenu&gt;
            &lt;li&gt;
                 &lt;div class="login-panel"&gt;
                 &lt;!-- login form --&gt;
                 &lt;/div&gt;
            &lt;/li&gt;
       &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>So this works fine while the user is hovered over the a element above, but how can I keep the '.splash .login-panel' [in the body of the page] hidden while the user has the mouse over the form or ul containing the form elements.</p>