The ul element does not appear after clicking the checkbox - html

Question

My responsive page has a nav menu on top. But for mobile resolution I created a button that opens up a ul of that nav bar upon clicking. It should work given the code, but it does not appear. I have tried my best to make it work but nothing seems to work. I still do not use javascript and I don't want to for the time being. So I wish to make it work using only CSS.
I tried this method to transform a div. Which absolutely worked fine.
#check:checked ~ .uno {
But if I use this same method to show the ul (as below) upon clicking the invisible checkbox, it doesn't work.
#check:checked ~ #nav-list{(to make it display block from display none)
Here's the code of the whole thing.
nav {
background-color : #0e1317;
width : 100%;
position : absolute;
z-index : 2;
height : 300px;
}
nav .navbar {
display : flex;
justify-content : space-between;
width : 95%;
margin : auto;
background-color : #0e1317;
padding : 20px 0;
}
#nav-list {
font-size: 1.4rem;
font-weight: 500;
}
.uno, .duo {
position : absolute;
height : 2px;
right : 15px;
top : 35px;
width : 25px;
background-color : aliceblue;
transition : all 1s;
}
.duo {
top : 45px;
}
#check:checked~.duo {
rotate : -45deg;
transform : translate(5px, -5px);
}
#check:checked~.uno {
rotate: 45deg;
transform: translate(2px, 2px);
}
.visually-hidden {
width : 40px;
height : 40px;
position : absolute;
right : 6px;
top : 18px;
background-color : #090c0f;
opacity : 0;
z-index : 4;
}
#check:checked~#nav-list {
display : block;
position : absolute;
z-index : 9;
}
#nav-list li {
float : left;
list-style : none;
position : relative;
}
#nav-list li a {
padding : 0 20px;
display : block;
position : relative;
}
nav ul ul {
display : none;
list-style : none;
}
li:hover>ul {
width : fit-content;
position : absolute;
display : block;
color : #b98d69;
transition : 0.75s;
top : 0;
padding : 35px 0;
}
nav ul li a:hover {
color : #b98d69;
transition : 0.75s;
}
.sub-child li {
background-color : #090c0f;
width : 200px;
padding : 5px 0;
font-weight : 300;
}
.sub-child li a {
padding-top : 15px !important;
padding-bottom : 15px !important;
font-size : 1.3rem;
}
#media (min-width: 1000px) /* Swiper Content Container till 1000px*/
{
#hamcross {
display : none;
}
#check {
display : none;
}
}
#media (max-width: 1000px) and (min-width: 100px) /* Swiper Content Container below 1000px*/
{
.book-a-table {
display : none;
}
.uno,.duo {
position : absolute;
height : 2px;
right : 15px;
top : 35px;
width : 25px;
background-color : aliceblue;
transition : all 1s;
}
.duo {
top: 45px;
}
#check:checked~.duo {
rotate: -45deg;
transform : translate(5px, -5px);
}
#check:checked~.uno {
rotate: 45deg;
transform : translate(2px, 2px);
}
.visually-hidden {
width : 40px;
height : 40px;
position : absolute;
right : 6px;
top : 18px;
background-color : #090c0f;
opacity : 0;
z-index : 4;
}
#nav-list {
display : none;
}
#check:checked~#nav-list {
display : block;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<nav>
<div class="navbar">
<ul id="nav-list">
<li>
HOME:-<i class="fa-solid fa-angle-down ficont"></i>
<ul class="sub-child">
<li>COFFEE HOUSE</li>
<li>RESTAURANT</li>
</ul>
</li>
<li>ABOUT</li>
<li>
MENU:-<i class="fa-solid fa-angle-down ficont"></i>
<ul class="sub-child">
<li>MENU COFFEE</li>
<li>MENU RESTAURANT</li>
</ul>
</li>
<li>
PAGES:-<i class="fa-solid fa-angle-down ficont"></i>
<ul class="sub-child">
<li>SERVICE</li>
<li>RESERVATION</li>
<li>HISTORY</li>
<li>OUR CHEFS</li>
<li>GALLERY</li>
<li>FAQS</li>
</ul>
</li>
<li>
BLOG:-<i class="fa-solid fa-angle-down ficont"></i>
<ul class="sub-child">
<li>BLOG GRID</li>
<li>BLOG STANDARD</li>
<li>BLOG SINGLE</li>
</ul>
</li>
<li>CONTACTS</li>
</ul>
<div id="hamcross">
<input type="checkbox" id="check" class="visually-hidden" />
<div class="uno"></div>
<div class="duo"></div>
</div>
</div>
</nav>
Pardon the long blocks of inefficient code. I am still learning, and would appreciate any help.

Answer 1

The reason your nav is not showing up is nav-list is a sibling to hamcross, hamcross is a parent to checkbox, uno and duo. Which means nav-list is like an uncle to checkbox, that is why #check:checked ~ #nav-list does not work. You need to have a hierarchy that you can traverse the dom with.
Check out this link for 10 examples css only!