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