What's the best practice way to make a hover menu work for mobile?

Question

I've looked around but I haven't found an answer to what seems to be a common problem.

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:

$('li.threecolumns, li.twocolumns, li.onecolumn').hoverIntent(      
function() {
    $(this).children('div').fadeToggle(fadeInSpeed);
},
function() {
    $(this).children('div').fadeToggle(fadeOutSpeed);
});

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:

1. Attach onclick event and disable hover every time there is a click.

2. Detect the ability to hover (not sure how this is done) and use a click handler if it's available.

Answer 1

By default iOs and some Androids implement a tap for hover event. It's handy, however, you need to make sure your top-level links lead to a valid anchor. The days of unclickable parent placers are gone and if that link leads only to a page with all the children listed as links, so be it. But make it go somewhere.