CSS覆盖，菜单可折叠

Question

How i make the child lists expand and collapse by click ?

.tree-list li > ul{
display: none;
}

See the Pen Pure CSS Fullscreen Overlay Menu .

Answer 1

You can use it by jquery/javascript or you can simply use css for hover. for jquery just write onclick ul display:block along with this css.

<nav id="dropdown">
<ul>
  <li><a href="#">Menu</a>
    <ul>
      <li><a href="#"> 1</a></li>
      <li><a href="#"> 2</a></li>
      <li><a href="#"> 3</a></li>
</ul>
</nav>

In CSS

    #dropdown
{
    margin-top:15px
}

#dropdown ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#dropdown ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#dropdown ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}


#dropdown ul li:hover
{
    background:#f6f6f6
}

#dropdown ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

#dropdown ul ul li
{
    float:none;
    width:200px
}

#dropdown ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#dropdown ul ul ul
{
    top:0;
    left:100%
}

#dropdown ul li:hover > ul
{
    display:block
}