Issues with CSS checkbox checked not working in nav ul - css

Question

I have a checkbox like this,
<nav>
<div id="center">
<ul>
<li>Home</li>
<li>Skill</li>
<li>Profile</li>
</ul>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
</div>
</nav>
but, the check box doesn't work on the check box selector and I don't know why.
this is my css nav and check box.
nav ul{
position: fixed;
width: 100%;
height: 200px;
background: #2c3e50;
top: 47px;
display: none;
text-align: center;
padding-left: 0;
transition: all .5s;
}
#check:checked ~ nav ul {
display: block;
}

Answer 1

On a related note, ~ is for the general successor sibling (meaning the element comes after this one).
Since your ul has the fixed position, move it after label tag.
Also remove nav from #check:checked ~ nav ul in css style.
nav ul {
position: fixed;
width: 100%;
height: 200px;
background: #2c3e50;
top: 47px;
display: none;
text-align: center;
padding-left: 0;
transition: all .5s;
}
#check:checked ~ ul {
display: block;
}
<nav>
<div id="center">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li>Home</li>
<li>Skill</li>
<li>Profile</li>
</ul>
</div>
</nav>