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}

Answer 2

我能够使用符合标准的代码使它运行良好，而无需Javascript hack。

CSS的关键部分：

/* hide submenu by default */
.nav .submenu {
  display: none; 
}
/* show submenu on :hover and :focus-within */
.nav li:hover .submenu, .nav li:focus-within .submenu {
  display: block; 
}

要使:hover在 iPad 上正常工作，您需要将tabindex添加到顶级菜单项：

<ul class="nav">
  <li tabindex="0">
    Menu Item
    <ul class="submenu">
      <li>...</li>
    </ul>
  </li>
</ul>

然后为了能够关闭菜单，您还需要将 tabindex 添加到<body>标记：

<body tabindex="0">

这种方法的好处是它还允许键盘导航，这有利于可访问性。