title: .hover Works, On Click doesn't
body: <p>So this has caused me a lot of headace.
  I am making a "pulldown accordion submenu" (for the lack of a better name).
  My script works, but only on HOVER. If I try to use .click, .on("click"), .on("click", "li") etc. nothing works. The script only works when using .hover.</p>
  
  <p>NOTE!
  It's only the "#TopMenu" that is supposed to have the on click event. The sub-menu ("#accordion") is going to be hover.</p>
  
  <p>Any ideas ?</p>
  
  <p>Working:</p>
  
  <pre><code>$(document).ready(function () {
  
      $('#accordion li').hover(function () {
          $(this).find('ul').stop(true, true).slideDown()
      }, function () {
          $(this).find('ul').stop(true, true).slideUp()
      }).find('ul').hide()
  
  $('#TopMenu li').hover(function() {
  
          $(this).find('li').stop(true, true).slideDown()
      }, function () {
          $(this).find('li').stop(true, true).slideUp()
      }).find('li').hide()
  
  });
  </code></pre>
  
  <p>Changing "#TopMenu" to CLICK is NOT WORKING:</p>
  
  <pre><code>$(document).ready(function () {
  
      $('#accordion li').hover(function () {
          $(this).find('ul').stop(true, true).slideDown()
      }, function () {
          $(this).find('ul').stop(true, true).slideUp()
      }).find('ul').hide()
  
  $('#TopMenu li').on('click', function() {
  
          $(this).find('li').stop(true, true).slideDown()
      }, function () {
          $(this).find('li').stop(true, true).slideUp()
      }).find('li').hide()
  
  });
  </code></pre>
  
  <p>I have a working test here: <a href="http://jsbin.com/nidazuq/3/embed?html,js,output" rel="nofollow">http://jsbin.com/nidazuq/3/embed?html,js,output</a></p>
  
  <p>I'm going nuts over this, I've searched high and low for a solution. please help.</p>