I can’t help you with android as I don;t have a device to test I;m afraid. As I said above you can make the ipad hover if you use a link and indeed this old menu from years and years ago works on the ipad with no problem except you can’t close the menu. It’s strange because if the top level anchors were spans the menu would still work in normal browsers but not on the ipad/iphone. It doesn’t use display:none but moves it offscreen and the ipad is fine with that.
I’m a bit short of time at the moment (and the wife has the ipad) otherwise I’d run some tests with your layout. If i get a chance tomorrow I’ll have another look if you haven;t solved it yourself by then
Ok I figured out my confusion here. With the rule -webkit-transition:all 0.3s ease-in-out; in place iOS won’t hover unless I add display none - display block or display table - display block. So i just assumed ios didnt hover - never paid much attention i guess. So if you find iOS won’t hover there is your fix.
Additionally I found that, without the hover code in place, if you actually have a destination link in the href, upon clicking it, it just strait launches to it. With the code in place, you click once for hover event, and an additional time to follow the link.
The strange thing in the dropdown example I showed you is that the link itself has no hover affect at all. Its the list element that when hovered shows the nested ul as there are no rules for the anchor yet it won’t work on ipad/iphone unless there is a link in place.
With the rule -webkit-transition:all 0.3s ease-in-out; in place iOS won’t hover unless I add display none
Interesting. Thanks for posting your findings Eric as they will come in useful
