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;
}

Answer 1

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}