solution for hover on touch screen
Category: Website Troubleshooting
Do you have any suggestions for how to handle hover on touch screens. hilmarholyrosary.org is the one of the sites I'm having issues with.
Unfortunately there isn't a simple quick-fix for having a menu with links that relies on the hover functionality of the mouse to suddenly also work with touch screen devices.
Some larger touch screen devices such as a tablet might have functionality built in where a single long tap is treated as a hover, but not all of them are going to do this, and most mobile phones will not either.
This is when more complex methods of <a href="http://www.inmotionhosting.com/support/edu/website-design/create-responsive-template/introduction-creating-a-responsive-web-design" target="_blank">creating a responsive web design</a> would be important. That way your site can detect what type of device it's being viewed on, and then adjust accordingly to make your site navigable on that device.
The <a href="http://dev.w3.org/csswg/mediaqueries4/#hover" target="_blank">@media (hover) media query</a> should let your site detect if the device viewing it is capable of hovering. Then you could swap out some CSS rules to make your menu <strong>clickable</strong> instead of <strong>hoverable</strong>, or you could just make it so your menu always works on clicks instead of hovers.
Here is a <a href="http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html" target="_blank">pure CSS drop-down menu when clicked</a> that I found that might lead you in the right direction.
Please let us know if you had any further questions at all.
Like this Question? Tweet