仅CSS下拉菜单不支持'；I don’’我不喜欢iPad等产品，只需点击菜单链接而不显示菜单

我们在这里创建了一个新网站www.worthingleisure.co.uk/splashpoint

它的顶部有一个仅CSS的菜单，可以通过使用li:hover-ul方法，通过适当的显示和隐藏，在iPad、iPhone和其他基于触摸的设备上运行

但是，例如，如果您点击Facilities，它会跟随链接，并且在加载Facilities页面时只会暂时显示菜单。如果你回击，菜单就会显示“好”！我敢肯定，这曾经运作良好，但现在已经停止工作

我已经画了一个空白，并尽一切努力让它成为“一次点击”打开菜单，“第二次点击”跟随超链接的URL，并画了一个空白，包括将“onclick='return false'”放在其他地方建议的li项目中

有人有什么想法吗？我整个上午都在研究这个问题，没有找到答案，但是其他仅CSS的菜单工作得非常好，我无法理解它们和我们的菜单有什么不同

非常感谢,，

---

Vicky

好吧，这是其他人所说的话的高潮。你可以在iPad上实现悬停效果，但这取决于具体情况。它对您的不起作用的原因是因为“设施”菜单项也是一个链接。因此，当您按下它时，它会触发悬停和单击（这就是为什么您返回页面时会看到它）

如果设施是一个跨度，并且仍然有正确的CSS悬停，那么它将工作，因为您正在点击它，但没有点击链接

---

由于您可能希望像其他人建议的那样保留这些父类别链接，因此您可能希望使用Javascript/jQuery来抑制默认操作（但仅适用于触摸事件设备，因为您不希望它不能在带有鼠标的设备上工作）

我在这里发布了一个解决方案（涉及检测单击+悬停事件之间的延迟时间差异）：我也遇到了同样的问题。本页帮助解释了iOS如何处理

：hover

状态：

基本上，如果

：hover

规则更改子元素的

显示

或

可见性

，iOS将触发悬停状态，而不是立即加载链接

然后我还意识到，当悬停状态涉及CSS转换时，iOS会立即加载链接，而不是暂停悬停状态。所以我不得不禁用我的iOS转换，然后

---

正如您在问题中所提到的设置

onClick=“return false”

，我想这应该是

onClick=“return true”

。

---

这解决了我的问题，尽管这个问题已经很老了，但我希望这能帮助别人。

纯CSS无法做到这一点。你需要使用JS来检测触摸事件并抑制链接的默认操作。上次我检查你不能在基于触摸的设备（如平板电脑或智能手机）上“悬停”。你在该页面上有YouTube视频吗？这个问题与你链接到的问题相同吗？问题完全相同。。。希望初始触摸事件像悬停一样运行，并防止其触发单击事件。对不起，这是否意味着应该将其标记为重复项而不是交叉链接？我是新来SO的。是的，没错。如果这些问题相同，则应标记为Dupe。如果答案需要合并或者需要做一些更复杂的事情，你甚至可以添加一些解释性的文字。谢谢谢谢你的提示，但不幸的是，作为一个完全的新手，我没有足够的声誉去投票给被愚弄的人，甚至连一个版主都没有。我能做的最好的事情就是链接到原来的问题，这实际上是一个问题。

.ios .nav li ul {
    -webkit-transition: none;
    transition: none;
}