Question

我有一个水平菜单的纯CSS实现，可以在计算机上的浏览器上正常工作。该网站是www.intercessionsp.org。但是，在触摸设备上（具体来说，我在iPad和iPhone上尝试过Safari），菜单不起作用。如果有子菜单，则触摸它们会导致根本没有响应（主菜单项工作正常）。我试图实现两个解决方案： 1.使用onclick =“return true”，基于terraling的解决方案在“iPad / iPhone上的Hover CSS事件触摸事件”问题这里讨论stackoverflow。 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;
}

因为我已经有了display：block in my li：hover＆gt; .nav，我尝试将其添加到#nav li：hover＆gt; a，＃nav li：悬停（没有期待这个工作）和li：悬停，但都没有奏效。我应该补充一点，我查看了Renich关于设置宽度值的评论，但由于我已经设置了宽度值，所以这似乎没有用。

我想继续使用纯CSS实现。

Answer 1

您的菜单依赖于css选择器:hover以显示列表项。为了让那些在iPhone等移动设备上显示的用户必须能够点击。您可以尝试使用<a>标记在菜单的第一级包装文本。例如：<a href="#">About Us</a>

在移动设备上查看：

http://jsfiddle.net/tlaverdure/L42AE/

CSS水平菜单在触摸设备上不起作用

1 个答案: