我有一个水平菜单的纯 CSS 实现，可以在计算机上的浏览器上正常工作。该网站是 www.intercessionsp.org。但是，在触摸设备上（特别是，我在 iPad 和 iPhone 上尝试过 Safari），菜单不起作用。如果有子菜单（主菜单项工作正常），触摸它们根本不会引起任何响应。我尝试实现两种解决方案： 1. 使用 onclick="return true"，基于 terraling 在 stackoverflow 上的“iPad/iPhone Touch Event on Hover CSS”问题中的解决方案。2. 添加#ios ul { display: none; } 和 #ios li:hover ul { display: block; } 基于 Philip Renich 在 elfboy.com 上的一篇名为“让 CSS 下拉菜单在 iPhone 上工作”的帖子。都没有奏效。
这是我的css文件的相关部分：
/* horizontal menus */
#nav, .nav, #nav .nav li {
margin:0px;
padding:0px;
}
#nav li {
float:left;
display:inline;
cursor:pointer;
list-style:none;
padding:10px 30px 10px 30px;
border:1px #000 solid;
position:relative;
background: #990000;
}
#nav li ul.first {
left:-1px;
top:100%;
}
li, li a {
color:#fff;
text-decoration:none;
}
#nav .nav li {
width:100%;
text-indent:10px;
line-height:30px;
margin-right:10px;
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:#990000;
onclick="return true"
}
#nav li a {
display:block;
width:inherit;
height:inherit;
}
ul.nav {
display:none;
}
#nav li:hover > a, #nav li:hover {
color:#990000;
background:#fff;
}
li:hover > .nav {
display:block;
position:absolute;
width:200px;
top:-2px;
left:30%;
z-index:1000;
border:1px #000 solid;
}
li:hover {
position:relative;
z-index:2000;
}
#basic li {
color:#000;
}
由于我的 li:hover > .nav 中已经有 display:block，我尝试将其添加到 #nav li:hover > a, #nav li:hover （不希望这个工作）和 li:hover，但两者都没有工作。我应该补充一点，我查看了 Renich 关于设置宽度值的评论，但由于我已经设置了宽度值，这似乎没有用。
我想继续使用纯 CSS 实现。