Simulating hover behaviour in Android browser for touch events

Question

My Wordpress website is using Superfish 1.5.4 to render menu items.

My menu consists of a number of parent menu items, which are also clickable pages, and on hovering over these parent items, the sub menu items should appear

When hovering over a parent menu item in my PC's browser the sub menu items appear, and this is the intended behaviour.

In iPhone browsers, when touching a parent menu item, the sub menu items appear, and this too is the preferred behaviour. (So this effectively triggers the hover behaviour)

The problem is that on Android devices, touching a parent menu item causes a click event as opposed to the hover behaviour we see for iPhone.

I've looked at the Superfish JavaScript and I don't see any iPhone specific logic.

Therefore, I'm wondering why a touch in an iPhone causes the hover behaviour, but not in an Android device.

What am I missing here?

Answer 1

The problem is essentially that a :hover feature doesn't really exist on touch devices (given that there's no physical way to hover like you can with a mouse). The only reason you get the intended effect on an iPhone is that devices using iOS trigger the :hover event before the click event so you will see the intended style for a brief moment before the page changes. There aren't really any good solutions to this, especially for menus with sub-menus like yours, but I'd check out some resources like this to get a better idea of the problem and possible ways it's being "solved".