选中CSS复选框的问题在nav ul中不起作用

我有一个这样的复选框

 <nav>
        <div id="center">
            
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Skill</a></li>
                <li><a href="#">Profile</a></li>

            </ul>

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

        </nav>

---

在相关注释中，

~

用于一般后继同级（意味着元素位于此同级之后）

由于您的

ul

具有固定位置，请将其移动到

label

标签之后

同时以css样式从

#check:checked~nav ul

中删除

nav

nav-ul{
位置：固定；
宽度：100%；
高度：200px；
背景#2c3e50；
顶部：47px；
显示：无；
文本对齐：居中；
左侧填充：0；
过渡：全部5秒；
}
#检查：检查~ul{
显示：块；
}

在相关注释中，

~

用于一般后继同级（意味着元素位于此同级之后）

由于您的

ul

具有固定位置，请将其移动到

label

标签之后

同时以css样式从

#check:checked~nav ul

中删除

nav

nav-ul{
位置：固定；
宽度：100%；
高度：200px；
背景#2c3e50；
顶部：47px；
显示：无；
文本对齐：居中；
左侧填充：0；
过渡：全部5秒；
}
#检查：检查~ul{
显示：块；
}

您的

导航ul

在哪里？我已将其添加到问题中您的

导航ul

在哪里？我已将其添加到问题中

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