title: jQuery - Add a class on click, remove it on Hover
body: <p>I've got a simple jquery menu set up... it works fine except for the parent item. I've only listed one parent item, but there may be many, so raw #id won't work for this either. I want to apply a class when it is CLICKED, but then remove that class when the user hovers elsewhere and the menu slides away. </p>
  
  <p>Here is what I have so far that isn't working for me.</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
  
              $("ul.topnav li a").click(function () {
                  $(this).parent().find("ul.subnav").slideDown('fast').show();
  
                  $(this).parent().hover(function () {
                  }, function () {
                      $(this).parent().find("ul.subnav").slideUp('slow');
                      $(this).parent().removeClass("subhover");
                  });
              }).before(function () {
                  $(this).addClass("subhover");
              });
          });
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;ul class="topnav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
    &lt;li class="dropdownmenu"&gt;
       &lt;a href="#"&gt;Menu Parent&lt;/a&gt;
       &lt;ul class="subnav"&gt;
          &lt;li&gt;Item&lt;/li&gt;
       &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>