<ul>
<ul>
<li><input type="checkbox" id="cb1"/><label for="cb1">Level 1</label>
<ul>
<li><input type="checkbox" id="cb2"/><label for="cb2">Level 2-A</label>
<ul>
<li><label>Level 3-A</label> Content</li>
<li><label>Level 3-B</label> Content</li>
</ul>
</li>
<li><input type="checkbox" id="cb3"/><label for="cb3">Level 2-B</label>
<ul>
<li><input type="checkbox" id="cb5"/><label for="cb5">Level 3-A</label>
<ul>
<li><label>Level 4-A</label> Content</li>
<li><label>Level 4-B</label> Content</li>
<li><label>Level 4-C</label> Content</li>
<li><label>Level 4-D</label> Content</li>
</ul>
</li>
<li><input type="checkbox" id="cb6"/><label for="cb6">Level 3-B</label>
<ul>
<li><label>Level 4-A</label> Content</li>
<li><label>Level 4-B</label> Content</li>
</ul>
</li>
<li><input type="checkbox" id="cb7"/><label for="cb7">Level 3-C</label>
<ul>
<li><label>Level 4-A</label> Content</li>
<li><label>Level 4-B</label> Content</li>
<li><label>Level 4-C</label> Content</li>
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" id="cb4"/><label for="cb4">Level 2-C</label>
<ul>
<li><label>Level 3-A</label> Content</li>
</ul>
</li>
</ul>
</li>
</ul>
ul { list-style- type: none; }
ul { list-style-type: none; }
label{
background-color: #AAAFAB;
border-radius: 5px;
padding: 3px;
padding-left: 25px;
color: white;
}
li {
margin: 10px;
padding: 5px;
border: 1px solid #ABC;
border-radius: 5px;
}
input[type=checkbox] { display: none; }
input[type=checkbox] ~ ul {
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
white-space:nowrap;
transition:all 1s ease;
transition:all 1s ease;
transition:all 1s ease;
transition:all 1s ease;
}
input[type=checkbox]:checked ~ ul {
max-height: 100%;
max-width: 100%;
opacity: 1;
}
input[type=checkbox] + label:before{
transform-origin:25% 50%;
border: 8px solid transparent;
border-width: 8px 12px;
border-left-color: white;
margin-left: -20px;
width: 0;
height: 0;
display: inline-block;
text-align: center;
content: '';
color: #AAAFAB;
transition:all .5s ease;
transition:all .5s ease;
transition:all .5s ease;
transition:all .5s ease;
position: absolute;
margin-top: 1px;
}
input[type=checkbox]:checked + label:before {
transform: rotate(90deg);
/*margin-top: 6px;
margin-left: -25px;*/
}