顺便问一下，汉堡的代码丢了吗

Question

我一直试图在没有JS的情况下进行checkbtn，但我的代码似乎不起作用。我仍然不知道哪里出了故障，或者代码是否过时了。下面是代码和样式。负利润率(-100%(不起作用，我不知道我这样做是否正确，因为这是我第一次这样做。

.navbar .checkbtn {
display: block;
}
.header .navbar ul {
height: 20em;
width: 100%;
background: darkgreen;
margin-top: 4.2em;
text-align: center;
right: -100%;
transition: all .5s;
}
#check:checked~ul {
right: 0;
}
.header .navbar ul li {
display: block;
}

<div class="header">
<div class="logo"><a href="#Index.html"><h3>Code</h3></a>
</div>
<div class="navbar">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">&#9776;</label>
<ul>
<li><a href="#Index.html">Code</a></li>
<li><a href="#About-us.html">code</a></li>
<li><a href="#Coffee.html">code</a></li>
<li><a href="#Farmers.html">code</a></li>
<li><a href="#Contacts.html">code</a></li>
</ul>
</div>
</div>

Answer 1

您的.navbar ul将忽略right: -100%，因为它具有静态定位。将其更改为任何非静态值，例如relative或absolute。