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

根据我的测试，对于下拉菜单，请确保该<a href="#">元素在页面上可见且可单击，我做了一个简单的演示，它工作正常。

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

对于任何元素，Apple ¹建议添加onclick = "void(0)"我也发现onclick="return false;"或onclick=""所有作品。

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}