Question

如何让子列表通过点击展开和折叠？

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

请参阅笔Pure CSS Fullscreen Overlay Menu。

Answer 1

您可以通过jquery / javascript使用它，或者您只需使用css进行悬停。对于jquery，只需编写onclick ul display：block 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>

在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
}

CSS叠加菜单可折叠

1 个答案: