CSS下拉导航，单击显示而不是悬停

Question

https://jsfiddle.net/ax92n1hq/3/

此导航在正常大小的屏幕上完全符合我的要求。但是，里面......

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

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

Answer 1

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

Answer 2

首先：请在此处发布您的代码，因此我们不必去JSFiddle看看它。

您提出的解决方案使用您要显示的:focus的父<li>上的伪类<ul>。通过单击它可以实现:focus。但是，<a>位于顶部＆＃34; <li>和＆＃34;在顶部＆＃34; <a>的{​​{1}}是<span>。:focus不幸的是，没有父选择器是CSS（尚未）。因此，通过这种方式，您无法使用CSS，但需要一些JS，更改HTML或使用隐藏的复选框技巧。

您可以轻松查看浏览器检查器中的内容。