Try out with the below example, it has worked finr for me:
/ CSS /
ul {
background:red;
margin-top:-90px;
transition: 1s;
}
ul li {
transition: 1s;
}
input[type=checkbox] {
position: absolute;
top: -999px;
left: -999px;
}
input[type=checkbox]:checked ~ ul {
margin-top:0px;
}
label {
display:block;
width:100%;
height:20px;
}
/ HTML (for demo) /
<input type="checkbox" id="toggler">
<ul id='dropDown'>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Second to last one</li>
<label for="toggler"><li>Last one</li></label>
</ul>
<div>Other content</div>
hope this helps.
