title: How to add and remove class when user clicks and hover a link
body: <p>I have a list of  menu items  and i want to add same class  when a user clicks on any <em>li</em> <strong>or</strong> add class on hover <em>li</em>.</p>
  
  <p>I have a menu items like following:</p>
  
  <pre><code>$('#menu li').click(function() {
      $('#menu li').not(this).removeClass('active');
      $(this).addClass('active');
  });
  
  $("#menu li").hover(
                  function () {
                      $(this).addClass('active');
                  }, 
                  function () {
                      $(this).removeClass('active');
                  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/866pzu47/173/" rel="nofollow noreferrer">http://jsfiddle.net/866pzu47/173/</a></p>
  
  <p>the issue is if user clicks 'li' the class added to  the li , when mouse over I need to remove the class added Due to the previous  user click or again added the  active iems.  </p>