CSS没有点击处理程序。因此，不可能使用标准CSS。您可以使用一种称为“复选框hack”的方法，但是我谦虚地认为，它有点笨拙，并且会像您的用例要求那样在导航菜单中使用，这很尴尬。因此，我建议使用jQuery或Javascript。这是使用jQuery的一种非常简单的解决方案。
基本上，我们从一开始就隐藏了子导航，
display: none;然后使用jQuery，当单击“ .parent”时，将类“
.visible”切换到显示子导航元素（嵌套的UL）
display: block;。再次单击时，它会在删除类时消失。
请注意，要使此方法起作用，每个嵌套
<UL>的“ sub-nav”都 必须 具有
.sub-nav该类，并且其父元素（the
<LI>）
必须具有
.parent该类。另外，由于它使用jQuery，因此您需要将jQuery库连接到您的站点。您可以自己托管它并像往常一样链接它，也可以从Google的图书馆服务（推荐）中链接它。
$(document).ready(function() { $('.parent').click(function() { $('.sub-nav').toggleClass('visible'); });});#nav ul.sub-nav { display: none;}#nav ul.visible { display: block;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul id="nav"> <li>Home</li> <li >about <ul > <li>Johnny</li> <li>Julie</li> <li>Jamie</li> </ul> </li> <li>Contact</li></ul>
