单击CSS创建下拉菜单

Question

我需要建立一个包含5个选项的菜单，单击某个菜单后，将出现一个新的子菜单。我完全不知道该怎么做。

/**Navigation */



nav {

  border: 1px solid red;

  float: left;

  margin-right: 35px;

  min-height: 280px;

}



nav li {

  text-decoration: none;

  font-weight: normal;

  color: red;

  list-style: none;

}





/**Content */



#section {

  background-color: ;

  border: 1px solid;

  font: normal 12px Helvetica, Arial, sans-serif;

  margin-left: 180px;

}



.clearfix:before,

.clearfix:after {

  content: " ";

  display: table;

}



.clearfix:after {

  clear: both;

}


<div class="clearfix"></div>

<nav>

  <ul>

    <li><a href="index.html" accesskey="1"> Home </a> </li>

    <li><a href="Portfolio.html" accesskey="2"> Portfolio </a> </li>



    <ul>

      <li><a href="Commercial.html">Commercial</a> </li>

      <li><a href="Residential.html">Residential</a> </li>

      <li><a href="heritage.html">Heritage</a> </li>

      <li><a href="Rennovations.html">Rennovations</a> </li>

    </ul>



    <li><a href="services.html" accesskey="3"> Services </a> </li>

    <li><a href="aboutus.html" accesskey="4"> About Us </a> </li>

    <li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>

  </ul>

</nav>

Answer 1

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 class="parent">About

    <ul class="sub-nav">

      <li>Johnny</li>

      <li>Julie</li>

      <li>Jamie</li>

    </ul>

  </li>

  <li>Contact</li>

</ul>