我正在尝试让我的网站可以通过移动设备访问，并将其安排在一定尺寸以下，顶部的菜单栏变成了下拉菜单。不幸的是，它适用于悬停，所以当我尝试在我的手机上使用它时，什么也没有发生。谁能建议我如何更改代码以使其与触摸一起工作？
html
<nav id="nav_mobile" role="navigation">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
CSS
#nav_mobile {
position: relative;
padding-top: 2%;
margin: 0px auto;
}
#nav_mobile ul {
width: 100%;
text-align: center;
position: absolute;
background: #F8F8F8;
min-height: 50px;
background-image: url('../img/Menu_button.png');
background-repeat: no-repeat;
background-position: 50% 0%;
}
#nav_mobile li {
display: none;
margin: 0;
border-bottom: 1px solid #ceced6;
background: #070707;
}
#nav_mobile #current {
display: block;
}
#nav_mobile a {
display: block;
}
#nav_mobile #current a {
background: none;
color: #666;
}
#nav_mobile ul:hover {
background-image: none;
}
#nav_mobile ul:hover li {
display: block;
}
如果需要，我很乐意在代码中包含 jQuery，但如果可以的话，我希望将其保留为 css。
编辑 我已将悬停更改为事件状态并将 ontouchstart=""添加到 body 标签。结果是菜单现在激活，但保持激活的时间不够长，您无法选择链接。
最佳答案
使用:active pseudoclass.它应该可以工作，但在某些浏览器中，您需要一个小技巧才能使其工作:将事件处理程序附加到 body 上的 touchstart 事件 (ex:<body ontouchstart="">)
关于html - 移动导航 - 触摸不激活，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30153126/