my menu button when clicked isn't opening the nav and it should be - menu

Question

this is the code for my nav
.nav {
z-index: 1;
width: 100%;
background-color: red;
display: block;
position: absolute;
top: 100%;
}
.nav ul {
display: none;
}
and this is the code for my menu
/* checkbox (for menu) */
.menu-icon-wrap {
/* background color of checkbox */
top: 5.5px;
left: 960px;
/* position of entire menu /w checkbox */
position: absolute;
/* ^ this allows checkbox to be positioned */
cursor: pointer;
z-index: 1;
}
/* (menu) */
.menu-icon {
padding: 15px 20px;
display: block;
float: right;
/* ^ makes the menu go beside(next to) the checkbox */
cursor: pointer;
overflow: hidden;
position: relative;
z-index: 1;
}
.menu-icon .navicon {
position: absolute;
top: 14px;
left: 10px;
width: 20px;
height: 2.5px;
background: black;
border-radius: 4px;
transition: 0.5s;
display: block;
z-index: 1;
}
.menu-icon .navicon:before,
.menu-icon .navicon:after {
content: '';
transform: translateY(-6px);
width: 15px;
height: 2.5px;
background: black;
display: block;
position: relative;
}
.menu-icon .navicon:after {
content: '';
transform: translateY(+4.5px);
height: 2.2px;
width: 10px;
display: block;
position: relative;
background: black;
}
.menu-btn:checked ~ .menu-icon .navicon
{
background: transparent;
}
.menu-btn:checked ~ .menu-icon .navicon:after {
width: 21px;
transform: translateY(0px) rotate(315deg);
transition-delay: 0.125s;
}
.menu-btn:checked ~ .menu-icon .navicon:before {
width: 25px;
transform: translateY(0px) rotate(45deg);
transition-delay: 0.125s;
}
.menu-btn {
display: none;
}
.menu-btn:checked ~ .sub-nav {
display: block;
position: absolute;
top: 100;
left: 920px;
z-index: 2;
width: 100px;
height: 100px;
}
ul {
padding-left: 10px;
padding-top: 35px;
}
li {
display: block;
padding-left: 25px;
padding-top: 2px;
}
--color-link-toc: #878787;
.sub-nav {
display: none;
}
.sub-nav-item {
pointer-events: none;
opacity: 0;
display: block;
margin: 0.35rem 0;
opacity: 0;
}
.sub-nav-title {
pointer-events: none;
color: var(--color-link-toc);
}
and this is the html
<div.navbar class="navbar">
<!-- ^ header -->
<h2 class="nav__chapter"> Home</h2>
<div class="menu-icon-wrap">
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon">
<span class="navicon"></span>
</label>
</div>
<nav class="nav">
<!-- ^ nav -->
<ul class="sub-nav">
<li>Home</li>
<li>About</li>
<li>Testimonials</li>
<li>Moodboard</li>
<li>Contact</li>
</ul>
</nav>
</div.navbar>
please help me. I've been banging my head against the table trying to figure this out. I've spent days on this and can't get it working. I should be able to click the menu (checkbox) and when checked it should open the sub-nav or (nav). what am I doing wrong?