CSS drop down menu is not working on iOS devices

问题:

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

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

回答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}