Drop down menu fails on most mobile devices

[Siberian]

Hi, I was informed the only way to get this drop down to work on Andriod, WP & to a larger extent iPhone is though JS, I was hoping someone could lead onto what that problem may be ?

[hericles]

The basic problem is that it uses :hover to determine when to display the menu. Touch devices have no equivalent to :hover as it is meaningless. They only respond to touches.
Adding JS onclick or something similar is required.

[mattster]

Agreed with @hericles, mobiles wouldn't bother with a :hover.

Instead, you could use something like this, and intergrate it with what you've done already.

If you wanted the hover for browsers and jQuery for mobiles, all you need to do is do some basic responsive design and merge the examples together.

[Siberian]

Thanks you mattster, I've been fighting with this and I almost solved it, then I was informed by an iPhone user the menu did not completely collapse, arghh.
One thing I noticed you don't have a rule for the class=active ? I was informed I needed a rule !

Did anyone test if this works on iPhone ?

[hericles]

iPhone 4 - the menu unfolds correctly on click

[Siberian]

hericles - does the menu collapse on touch, not on click :)

[mattster]

If it works on iPhone 4, it should definitely work on all of the more recent ones...

@Siberian - mind posting a screenshot to see what you mean by not quite collapseing?

[Siberian]

The menu should when touched open, and when touched once again, collapse ?
iPhone is only the beginning !

[hericles]

No, it opens on touch and thats it. No further activity no matter what you do

[Siberian]

It needs to close on touch, I can't have the menu stay open ! I have two versions of code that are suppose to do the same thing, yet both so far both are failing, they either do one thing or the other thing, but not both arghhh !

[Siberian]

Finally have working code, successful on iPhone and Windows Phone, good guess Andriod will be positive as well :)