As we target more of the experience on touch devices like the iPad, where there is no hover state, we need to focus on making sure interaction works as intended.

For example, a lot of the sites we deploy at Imulus show a drop down navigation menu when a user hovers over a top level navigation item. Very standard interaction. On the iPad this interaction is hit-or-miss as the hover state on an iPad is actually a light tap, the click state being a more decisive tap. Well, it turns out in some instances the iPad will never recognize the first tap as a hover and will always treat it as a click — forcing the user to go directly to that page instead of seeing the hover menu. After some testing, we’ve found the fix.

See below for the code, the basic gist is we need to force a display change on the drop-down element on the :hover state.

Code that doesn’t work:

Code that fixes the issue (difference in bold):

It’s true that this makes the previous replacement technique (left:-9999px) irrelevant, but it works.