html - CSS 下拉菜单在 iOS 设备上不起作用

Question

为什么我的 CSS 下拉菜单适用于 Android 和所有 PC 浏览器，但不适用于 iOS 设备？

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