Issues with CSS checkbox checked not working in nav ul

I have a checkbox like this,

<input type="checkbox" id="check" >
            <label for="check" class="checkbtn">
                <i class="fas fa-bars"></i>
            </label>

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