I have used CSS dropdown menus on quite a few sites, based on the Suckerfish idea. These have worked fine for a long time and with the addition of the sfHover function they work in IE as well as all more modern browsers. But recently a client called me to say that the dropdowns weren’t working on her iPhone.
Making dropdown menus work on the iPhone
After a bit of trial and error and a lot of searching on the internet I discovered that the problem was that the iPhone (and I believe the iPad too) doesn’t honour the :hover pseudoclass. I was able to find a solution here and modified my code accordingly.
All I had to do was add onmouseover=”” to the li elements which contained ul elements for the dropdown menus. So;
<li onmouseover="">Top Level item
<ul>
<li>Dropdown item 1</li>
<li>Dropdown item 2</li>
</ul>
</li>
This solved the problem and made the iPhone display the drop down menu when the top level element was touched. A simple solution to a subtle problem.
But why doesn’t the iPhone work like everything else?
It seems that the reason Apple have done this is because you can’t actually hover on a touchscreen, which sort of makes sense until you think of the consequences. And if you can’t hover why do they honour the mouseover event which is surely the same thing?
One of the great things about smartphones is that they have good screens and good browsers so you can use the internet reasonably well from a mobile device. Unlike earlier attempts at mobile browsing, like WAP, any well designed website will work properly on a smartphone. You can design websites to take advantage of the smartphone’s extra capabilities but the vast majority of existing websites are navigable without changes. If only sites designed from scratch for mobile use could actually be navigated by a smartphone they wouldn’t have access to very much at all and would lose one of their main attractions. Apple have broken this; There must be quite large sections of some sites which are invisible to iPhone users.
And I mean EVERYTHING else!
All our websites are tested very thoroughly in lots of browsers. It isn’t possible to test every possible combination but we test in; Internet Explorer versions 6 through 9, Chrome, Firefox, Opera and Apple’s Safari. This issue doesn’t appear in any of them, though of course we are not using a touch screen device with any these. Even on Electric Plum’s iPhone simulator the dropdown menus work fine.
We don’t have a Mac so we can’t use Apple’s IOS simulator, I would be very interested to know if this problem is replicated there. Significantly the problem does not seem to occur on Android phones, only Apple have taken this route. I think they have made the wrong choice.
YOU SAVED MY DAY !!!
THANK YOU SO MUCH!
(my website needed exactly that!)
I am struggling with this exact same issue. I did what your tutorial said to do, but am using a WordPress site and have functions calling the primary nav instead of the typical etc. I put it right here: <li onmouseover="" ><a href="”>
When I checked my site out on my iphone, it worked the very first time! I got very excited but that slowly deflated because when I went to the next page and tried it, it’s not working. Would you mind, since you’re familiar with this, to take a look at the site I provided and let me know your thoughts? I am pulling out my hair on this one! Thanks!
Such a simple solution to such an irritating issue. Thanks much!
Which page have you put the code in?
I can’t see it in the homepage.
Thank you very much for this! You’ve saved hours of my time trying to work out why the lovely Apple products don’t show my suckerfish drop-downs.
Thank you!
Matt
Yes I’d like to add my thanks as well. I’d tested my site on all modern browers, including Safari on desktop, HTC and Samsung mobiles; then a couple of days after release came the ‘good news’, “hey, it’s broke on my iPhone”. You’ve saved me a lot of snorkeling in the murky mire.
That work perfectly, thanks a lot!
This works for me but if I want the dropdown to close if I tap anywhere else on the page. Is there a way to turn off the onmouseover with a second tap or a tap somewhere else on the page?
I’m afraid that is beyond my level of competence but if you do figure it out please let me know.
Great solution! But does it work on all touchscreens, also those with Android or Windows OS?
As far as I am aware it is only required on Apple products, it won’t do any harm on others (though I must admit I haven’t tried Windows Phone yet) but isn’t actually required.
Here’s the simplest solution I found – just add the following line inside to your span, li or anchor causes the iPad to behave like safari on mac and onclick open the dropdown
onClick=”return true”
See it in action here – http://www.naturalsal.it/
Hi, I have tried the onmouseover solution and onclick solution too. For some reason both are not working for me . It would be great help if you can check my website once and can tell the mistake i am doing. I am checking it on iphone dropdown menu appears and hide on click.
https://edo-jo.squarespace.com/
Please Note you have to enter the website as visitor by giving the random code displayed.
Thanks In Advance.
Thanks for that, excellent solution! I was hunting for a solution and the majority of the sites were on about downloading CSS menu generators to overcome the hurdle of Ipad/Iphone compatibility.
Thanks you have saved me hours of tinkering to get my menus to work.
I wonder if having the onclick code in the UL is causing problems, I have only put it on the LI tags.
Just a guess.
Thank you cotsweb for replying back.
I tried removing the click event from other elements but still facing the same issue.
Tried a lot of things here like giving width to secondary list, using all active & focus events as well , using mouseover event but none seems to be working for me here .
Can you please look again and suggest something if possible as i have removed onclick from ul.
Thank Again.
Hello,
i have a ipad mini and add onmouseover=”” make no different:(
i add it to the top menu li
Hi,
I’m afraid I can only tell you what worked for me.
If someone else can help I will be happy to post their comment here, but I’m afraid I can’t help.
I had this problem in wordpress.
I added a dummy link to the top level menu item. Link to “#”.
After that, when I tapped the top level item when visiting the wordpress page, the sub-menu popped up as expected on my iphone. Not sure about Android.
Thanks for this! You saved my ass!
Thank you! Simple solution that works!!!
Wow! It worked! Nice one!
Hi guys, I had the same problem in WordPress… Peter Larson’s solution save my day!!! Thanks a Lot!!!
A million thanks for that extremely simple and elegant solution. Thanks also for putting me onto Electric Plum. I’m a quasi-Luddite who refuses to use a cell phone due to the cancer risk– I’ve already undergone heavy radiation treatment on my neck, which previously had a malignant tumor, and that was enough radiation to last a lifetime. However, I do build websites and recognize the need to accommodate small, portable computing devices. Until now I haven’t had a way to test my work unless I borrowed someone’s phone. I’m quite fortunate to have discovered your blog.
I had the same problem and a very Simple solution that works . Thank you!
This was perfect! After trying many “fixes” suggested on other sites that didn’t work, I was getting ready to replace my whole menu. Thank you so much for posting this easy and effective solution.
thank you so much sir , perfect solution , thank you 🙂
Hey! Thanks for this! But this only works partially for me.
I am able to make the menu appear on iOS devices, but it won’t hide …
Anyone having a similar issue and/or would know how to fix it?
Hey… can anybody me tells me plz how to insert onmouseover effect
inside my code. An example would be appreciated.
thanks
Thanks very much! I’m sure I could have wasted many more hours looking for a non-convoluted solution that works!
For those that can use the onmouseover or onclick methods, you will find the popup window won’t close. That is because by touching the menu option, you have set focus to that menu window. I f touch anyother area that will accept focus (textbox, area, etc) the menu window will close.