title: Dropdown menu stays open on touch devices
body: <p>I have a drop down menu, and it works great except on touch devices.  On an ipad, when you touch one of the menu items, the dropdown appears like normal, but stays there even if you touch someplace else on the screen.  How can I make the menu disappear if you touch elsewhere on the screen?  Here's the jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/Jkfbm/" rel="nofollow">http://jsfiddle.net/Jkfbm/</a></p>
  
  <p>here's my jquery:</p>
  
  <pre><code>    $(document).ready(function(){
  $('ul.nav_menu &gt; li').hover(function() {
      $(this).children(".sub_menu")
          .stop(true, true)
          .animate({
              height:"toggle",
              opacity:"toggle"
          },600, 'easeInOutQuad')
          });
      });
  </code></pre>