单击CSS创建下拉菜单

单击CSS创建下拉菜单

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>