The site I am making has a hover menu, what is best practice to deal with this for touchscreens. How can I get it to work on mobile devices?
I googled this and some responses suggest:
:active
So I tried a quick fiddle on an iPhone, but it doesn't appear to work.
Whats the correct way to tackle this and why does my fiddle not work?
Also is there a CSS only solution?
For obvious reasons, the hover behavior doesn't work on touch devices. The most apparent solution is to make your menus activate on click, and if that's the case, I would recommend making that standard behavior for the desktop version as well. There's a case to made against hover menus because they just aren't as usable: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/