CSS 仅下拉菜单不喜欢 iPad 等。遵循菜单链接而不显示菜单

Question

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

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

但是，例如，如果您点击 Facilities，它会跟随链接并且只会在加载 Facilities 页面时短暂显示菜单。如果你回击，菜单就会显示正常!我确信这过去工作正常，但现在已经停止工作了。

我画了一个空白并尝试了一切让它成为“一次点击”打开菜单，“第二次点击”跟随超链接的 URL 并绘制了一个空白，包括在 li 项中放置“onclick='return false'”正如其他地方所建议的那样。

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

非常感谢，维琪

Answer 1

好吧，这是对其他人所说内容的总结。你可以在 iPad 上做悬停效果，但这要视情况而定。它对您不起作用的原因是因为 Facilities 菜单项也是一个链接。因此，当您按下它时，它会触发悬停和点击(这就是您返回页面时看到它的原因)。

如果 facilities 是一个跨度并且仍然有正确的 CSS 悬停那么它会起作用，因为你点击它但没有点击链接。

由于您可能希望保留那些父类别链接，正如其他人所建议的那样，您希望使用 Javascript/jQuery 来抑制默认操作(但仅适用于触摸事件设备，因为您不希望它在带鼠标的设备)。