CSS drop down menu is not working on iOS devices

Question

Why does my CSS dropdown menu work on Android and all PC browsers, but not iOS devices?

.mainHeaderBtns ul li:hover > ul {
    display:block;
}

Does this answer your question? [Typical CSS menu dropdown hover issue with iPad](https://stackoverflow.com/questions/17239912/typical-css-menu-dropdown-hover-issue-with-ipad) — Simon East, Sep 17 '21 at 15:31
@SimonEast This question was almost 6 years ago and has an accepted answer lol — Boodog, Sep 17 '21 at 20:30
Yes, apologies. That text you see in my comment above is inserted automatically by StackExchange when flagging threads as duplicates. I probably should have edited it, but too late to edit now. — Simon East, Sep 18 '21 at 06:46

Stickers · Accepted Answer · 2016-01-09T01:56:53.283

4

As of my tests, for a dropdown menus, make sure the <a href="#"> element is visible and clickable on the page, I have made a simple demo and it works fine.

.nav > li > ul {
  display: none;
}
.nav > li:hover > ul {
  display: block;
}

<ul class="nav">
  <li>
    <a href="#">Menu item</a>
    <ul>
      <li>Sub item</li>
    </ul>
  </li>
</ul>

For any element, Apple ¹ recommends to add onclick = "void(0)" I also found onclick="return false;"or onclick="" all works.

div span {
  display: none;
}
div:hover span {
  display: inline;
}

<div onclick="void(0)">Howdy <span>mates!</span></div>

¹_{https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html}

edited Jan 09 '16 at 01:56

answered Jan 09 '16 at 00:59

Stickers

75,527
23
147
186

Apple at one time recommended `onclick="void(0)"` to make something a touch-target, which I still use and seems to still work fine for my 3-level dropdown navigation menus on my iPad. I can't find the reference at the moment so I can't say if that's still what they recommend. – Stephen P Jan 09 '16 at 01:33
1

@StephenP I found the reference on Safari web content guide, and updated above, thanks! – Stickers Jan 09 '16 at 01:50
I actually figured this out right before you posted this (I used onClick="return true"). Thanks for your answer, though! – Boodog Jan 09 '16 at 07:08

Simon East · Answer 2 · 2021-10-19T08:06:04.650

I was able to get this to work quite well using standards-compliant code, without Javascript hacks.

The key pieces of CSS:

/* hide submenu by default */
.nav .submenu {
  display: none; 
}
/* show submenu on :hover and :focus-within */
.nav li:hover .submenu, .nav li:focus-within .submenu {
  display: block; 
}

To get the :hover to work correctly on iPad, you need to add a tabindex to your top-level menu items:

<ul class="nav">
  <li tabindex="0">
    Menu Item
    <ul class="submenu">
      <li>...</li>
    </ul>
  </li>
</ul>

And then to be able to close the menu, you need to add a tabindex to the <body> tag also:

<body tabindex="0">

The good thing about this approach is that it also allows keyboard navigation, which is good for accessibility.

CSS drop down menu is not working on iOS devices

2 Answers2

Linked

Related