Jquery hover menu not working for touch

Question

I have a dropdown menu with 3 items. It uses jquery hoverIntent plugin and works perfectly on desktop browsers. But when it comes to iPad/tablet, if I touch on any of the menu item, it just activates that menu item. It doesn't slides down. If I try to touch again on it, nothing happens. But when I click on the other menu item, it works fine. That menu slides down properly and after that every other menu item also works properly. (even the first one I touched). Can anybody please help me out with this issue?

Answer 1

Hover is designed with the mind-set that the user is using a mouse and be able to move the pointer on top of the element without clicking!!

the touch environment has no hover .... it is either you touch or you don't with your finger!!

so you need to hack it ..

Answer 2

you can use jquery mobile which add a layer for touch event

you also need to specify custom html for touch event :

http://www.w3.org/TR/touch-events/