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.