title: Dealing with mouseenter and mouseleave on the iPad
body: <p>I have a typical looking drop down menu that is hidden by default but by the following jQuery magic </p>
  
  <pre><code>&lt;ul class="navNew"&gt;
      &lt;li  class="test"&gt;
          &lt;a href="#"&gt;OPTION&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;Suboption -- Hidden&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  $(".navNew li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
      $(this).toggleClass('hover');                                  
  });
  </code></pre>
  
  <p>So with a mouseenter and a mouseleave, the class "hover" is added to the menu to make it visible or toggle it off to make it invisible again.  </p>
  
  <p>This all works like a charm, problem is on the iPad.  A single click will act as a mouseenter, but clicking the button again does not act as a mouseleave, and so the menu never closes again.  Can this code be modified so that a click will open and close this menu as well?</p>
  
  <p>I've created a jsFiddle to explain what my menu is doing:  <a href="http://jsfiddle.net/qgrt5/" rel="nofollow">http://jsfiddle.net/qgrt5/</a></p>