title: How to keep CSS class on menu item with dropdown
body: <p>I have a hidden dropdown that shows when a <code>&lt;li&gt;</code> is hovered. Here is the HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="products"&gt;
          &lt;a href="products.php"&gt;Products&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
           &lt;a href="about.php"&gt;About&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="nav-products"&gt;
      &lt;p&gt;Search by part number or product name:&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When it is hovered, the class <code>.active</code> is added to the <code>&lt;li&gt;</code>. Here is the jQuery:</p>
  
  <pre><code>$(".products").mouseover(function () {
      $("#nav-products").show();
      $(".products").addClass('active');
  });
  $(".products, #nav-products").mouseleave(function () {
      $("#nav-products").hide();    
  });
  $("#nav-products").mouseover(function () {
      $(this).stop(true, true).show();
  });
  $("#nav-products").mouseleave(function () {
      $(".products").removeClass('active');
  });
  </code></pre>
  
  <p>it works great <i>except</i> that if I exit the dropdown <code>&lt;div&gt;</code> through <code>li.products</code>, <code>li.products</code> keeps the <code>.active</code> class. I have tried adding in another function at different points-</p>
  
  <pre><code>$(".products").mouseleave(function () {
      $(this).removeClass('active');
  });
  </code></pre>
  
  <p>with no luck. I realize this basic question has been asked a ton of times here. I've used many other answers to get this far, but this last issue is something I cannot figure out.</p>
  
  <p>How can I get <code>li.products</code> to drop the <code>.active</code> class on mouseleave while keeping <code>.active</code> if the mouse goes into <code>#nav-products</code>?</p>