CSS下拉导航，点击而不是悬停显示答案

【问题标题】：CSS Dropdown Nav, Show on Click instead of HoverCSS下拉导航，点击而不是悬停显示
【发布时间】：2015-06-22 20:49:20
【问题描述】：

这个导航在正常大小的屏幕上完全符合我的要求。不过里面……

@media screen and (max-width: 640px)
{
    ....
}

我似乎无法弄清楚如何让下拉菜单显示点击而不是悬停。我 99% 确信这在 CSS 中是可能的。之前看到有人问过这个问题，得到了答案。但是现在我需要实现它，我再也找不到那个帖子了。

【问题讨论】：

您可能想尝试在链接上工作的:active 伪类。我知道您正在处理 ul 和 li 元素，但对于您指定的规则，您可能希望使用链接。
我尝试的第一件事是将 .nav ul li:hover > ul 更改为 .nav ul li:active> ul 和 .nav ul li:focus> ul。他们所有人仍然在悬停时显示下拉列表:-(
谷歌“复选框破解”

标签： css drop-down-menu navigation

【解决方案1】：

据我所知，纯 CSS 是不可能的。如果你真的不会使用 JS，你可以尝试使用一些隐藏的复选框并将工具按钮作为标签。然后根据复选框的状态设置菜单样式。

【讨论】：

纯 CSS 是可能的。请参阅此示例。 koen.kivits.com/articles/pure-css-menu 我只是无法让它为我工作！
你试过在手机上打开 jsfiddle 吗？它按原样对我有用。
@Grekomp 这可能是真的，但:hover 可能会在触摸设备上导致一些意外行为。
OP建议的方法在ios上根本不起作用，所以这是一个更大的问题

【解决方案2】：

首先：请在此处发布您的代码，这样我们就不必去 JSFiddle 就可以看到它了。

您提出的解决方案在您要显示的<ul> 的父<li> 上使用伪类:focus。这个:focus是通过点击实现的。但是，<a> 位于<li> 的“顶部”，而<a> 的“顶部”是<span>，它正在获取:focus。不幸的是，没有父选择器是 CSS（还）。因此，通过这种方式，您不会只使用 CSS，而是需要一些 JS，更改您的 HTML 或使用隐藏复选框技巧。

您可以在浏览器的检查器中轻松查看正在发生的事情。

【讨论】：

好的，谢谢。好建议。关于 JSFiddle.... 关于其他问题，我发布了大量代码，人们说，“不要那样做！只要使用 JSFIddle！”看来你不能总是取悦所有人。