CSS3 Dropdown Menu hover doesn't work

Question

my website is using a pure CSS3 dropdown menu. The problem is when the website is view on touch screen device, some of the menu item with hover property doesn't auto drop down.

How can I change it to be like, if the menu item has a hover dropdown, in touch screen devices you have to touch it then the menu will drop down where else in our PC it will still remain the hover effect.

Can it be done by using CSS only?

Answer 1

Have you tried using aria-haspopup to simulate hover on touch-enabled devices

Take a look at this article.

On a page element such as a menu, set the element's aria-haspopup property to "true". When an Internet Explorer 10 user on a touch-enabled device first taps the page element, the user's experience will be identical to that of a user who hovers over the element with a cursor.

I'm not sure what the browser support for this is like though.