I've got a superfish menu as the main menu on my site. Two of the links in the menu have sub-links and are presented as a drop-down, hover menu. This works great on desktop browsers. On iOS, however, the main link disappears if that menu item has a drop down. It's only gone in the default state though, if I tap on the spot where it should be, the link shows up again and the drop-down menu appears as it should. If I tap the other link which has a drop down menu, the first drop down will disappear and so will the main link. For example, if the normal menu looks like this..
and BAR has a drop down menu, then the menu will look like this on iOS:
but if I tap on that empty space, then
BAR will show up and so will the drop-down menu.
I've checked the CSS and don't see any differences in the styles.
I'm sorry I can't give you a link to the site to see where this is happening. I'm under an NDA and the site isn't public yet.
EDIT: I discovered that the css sets
.sf-menu li to have
position: relative. When I disable this rule in the inspector, then
BAR appears in the spot where it should be. However, when I do this, the drop-down menus no longer have the correct context for their positioning. So, I need this rule so the drop-downs work properly, but something about that rule is causing those elements to jump out of position.
So, two questions:
1) Do you know why this is happening and do you know of a fix?
2) or, do you know of a way to make them non-drop downs when iOS is detected? The dropdowns are not crucial to my site navigation.