为什么我的CSS下拉菜单在Android和所有PC浏览器上都能正常工作,但在iOS设备上不能正常工作?
.mainHeaderBtns ul li:hover > ul {
display:block;
}
.mainHeaderBtns ul li:hover > ul {
display:block;
}
根据我的测试,对于下拉菜单,请确保页面上的<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>
对于任何元素,苹果1建议添加 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>
onclick="void(0)"
来使某个元素成为可触摸目标。我仍在使用这种方法,并且在我的 iPad 上的三级下拉导航菜单中似乎仍然有效。我暂时找不到相关参考资料,因此无法确定他们是否仍然推荐这种方法。 - Stephen P我能够使用符合标准的代码很好地完成这项工作,无需使用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
正常工作,您需要在顶级菜单项中添加一个 tabindex
。<ul class="nav">
<li tabindex="0">
Menu Item
<ul class="submenu">
<li>...</li>
</ul>
</li>
</ul>
<body tabindex="0">
这种方法的好处是它还允许键盘导航,这对于可访问性非常有好处。