Dealing with mouseenter and mouseleave on the iPad

[-AdRiaN-]

I have a typical looking drop down menu that is hidden by default but by the following jQuery magic \[code\]<ul class="navNew"> <li class="test"> <a href="http://stackoverflow.com/questions/15600511/#">OPTION</a> <ul> <li>Suboption -- Hidden</li> </ul> </li></ul> $(".navNew li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { $(this).toggleClass('hover'); });\[/code\]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. 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?I've created a jsFiddle to explain what my menu is doing: http://jsfiddle.net/qgrt5/