css实现二级菜单显示和收缩

Posted blogging

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css实现二级菜单显示和收缩相关的知识，希望对你有一定的参考价值。

<ul class="nav">
    <li><a href="#">一级菜单</a>
        <ul class="subNav">
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
        </ul>
    </li>
    <li><a href="#">一级菜单</a>
        <ul class="subNav">
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
        </ul>
    </li>
    <li><a href="#">一级菜单</a></li>
    <li><a href="#">一级菜单</a></li>
    <li><a href="#">一级菜单</a></li>
</ul>
ul>li ul{transition:height 0.3s;}
ul>li:hover ul{height: 120px;}

 

以上是关于css实现二级菜单显示和收缩的主要内容，如果未能解决你的问题，请参考以下文章