title: What's the best practice way to make a hover menu work for mobile?
body: <p>I've looked around but I haven't found an answer to what seems to be a common problem.</p>
  <p>I have a basic dropdown menu that is activated on hover (using hoverintent plugin for jQuery). It works fine for desktop browsers but for mobile devices that don't convert hover events to click as iPad does, it doesn't work. Here's the Javascript as it is now:</p>
  <pre><code>$('li.threecolumns, li.twocolumns, li.onecolumn').hoverIntent(      
  function() {
      $(this).children('div').fadeToggle(fadeInSpeed);
  },
  function() {
      $(this).children('div').fadeToggle(fadeOutSpeed);
  });
  </code></pre>
  <p>My question is: what is the cleanest and least problematic way to use clicks for mobile devices and hover for desktops for a dropdown menu? I had a couple ideas but not sure which:</p>
  <ol>
  <li><p>Attach <code>onclick</code> event and disable hover every time there is a click.</p>
  </li>
  <li><p>Detect the ability to hover (not sure how this is done) and use a click handler if it's available.</p>
  </li>
  </ol>