Superfish Menu links disappear on iOS (only if they have dropdown menus)

Question

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..

FOO BAR BAZ BAT

and BAR has a drop down menu, then the menu will look like this on iOS:

FOO <empty space> BAZ BAT

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.

Answer 1

Enough tinkering and I found a solution. I'm not sure WHY it works, but it does.

During my experiments, I wondered if the z-index was the problem and if it was getting covered by something, so I cranked the z-index up to 10000 but that still didn't solve it.

I eventually discovered the position: relative thing I mentioned above. So I opened up the Computed Style box and toggled the position: relative rule on and off, on and off, which would break it, fix it, break it, fix it. Then I looked in the Computed values to see if anything else changed. Sure enough, the z-index changed. When it was in the working state the computed z-index was auto, so I created a css rule to explicitly set z-index to auto for those elements and viola... it's working.

Hopefully this will be helpful to someone else.