I implemented this css dropdown menu system a few years ago and I am just realizing now that it does not work on my iPhone, yet it works fine on my bosses android phone. I was under the impression that since IOS5, i-devices do register a touch event as a hover automatically but I guess I was wrong. The structure of this menu is a little weird in that the main tabs (other than Home and Contact) are not meant to take the user anywhere, only the submenu items actually go to another page. I have a feeling this is where the issue may lie, but I can't figure it out.
Here is a JS Fiddle.
The :hover is on <li> to cause the dropdown. Maybe this is the issue? or maybe its the way my boss coded the button so it would look like a link but not do anything on a click:
<li id="aboutus" class="blogbutton"><a><span>About Us</span></a>
I tried removing the anchor tags and the whole button goes away. I removed the span tags and the original problem still remains.
Is there a fix without having to rewrite the whole menu system?
Try adding an
onclick="return True;"attribute to the base menu that triggers the drop-down. Safari will trigger the hover attributes, but only if it thinks that the element does something when it's tapped, and for a static element like ali, this is the easiest way to achieve that.