CODEWITHSUNDEEP
cssdrop-down-menutouchtouchscreen
rapide
rapide

Reputation: 25

CSS3 Dropdown Menu hover doesn't work

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?

Upvotes: 3

Views: 716

Answers (2)

Danield
Danield

Reputation: 125463

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.

Upvotes: 1

Bas Slagter
Bas Slagter

Reputation: 9929

"hover" is not really a feature of touchscreens since it needs to have a mouse pointer involved. If you are using a good library that supports touchscreens, it should also work. If not, try another library or write something your own.

Upvotes: 0

Related Questions