如何使用 #checked 在响应模式下显示/隐藏菜单?

Question

我想制作一个响应式菜单导航栏，根据一些网站，我尝试使用复选框。不幸的是，由于我不知道的原因，我无法使其运行(说我是业余爱好者是高估了(。选中/取消选中按钮时，没有任何反应。如果有其他更有效的方法，请分享。 我不能使用HTML和CSS以外的任何东西来制作它。 这是代码。(我知道我不应该发布全部内容，但我太缺乏经验，不知道什么是有价值的，什么没有价值 - 对此感到非常抱歉！

.html：

<nav>
<!--logo-->
<a href="#" class="logo">TBD</a>
<!--meni-->
<ul>
<li><a href="#" class="active">Landing page</a></li>
<li><a href="#">about me</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
</nav>

.css：

nav{
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
background-color: #ffffff;
box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
padding: 0px 5%;
}
nav ul li{
float: right;
display: inline-block;
}
nav ul li a{
margin: 30px;
font-family: calibri;
color: #505050;
font-size: 19px;
font-weight: 700;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}

。

@media screen and (max-width: 796px) {
.checkbtn{
display: block;
margin-right: 40px;
color: black;
}
nav ul {
margin: 0px;
padding: 0px;
background-color: #ebeef4;
flex-direction: column;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
display: none;
}
nav ul li {
padding: 10px;
display: block;
}
nav ul li a{
font-family: calibri;
font-size: 1.4em;
text-transform: uppercase;
color: #5c5c5c;
}
nav ul li a:hover{
color: #121212;
}
#check:checked ~ ul{
display: block;
left: 0;
background: rgba(0,0,0,0.8);
}
nav.active ul {
display: flex !important;
}

我真的在努力理解这一点，我再次为长篇大论感到抱歉。 干杯！

Answer 1

复选框是需要按窗体运行的输入。检查后您希望发生什么？