How to nest a submenu in mobile navigation hamburger menu? - html

Question

I am trying to nest a submenu in a main menu for a mobile navigation hamburger menu. Here is an image of what I am trying to achieve:
Right now, my submenus are appearing over my other menus and not embedding inside. I cannot figure what I am doing wrong. Any help would be greatly appreciated!
Here is a link to the codepen.io pin.
Here is the same code in codepen.io:
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap');
* {
font-family: 'Roboto', sans-serif;
}
.main-navigation-bar {
height: 94px;
background-color: #00000000;
display: flex;
}
.section-1 {
width: 30%;
display: flex;
align-items: center;
}
.logo-box {
width: 208px;
height: 48px;
}
.section-2 {
width: 70%;
justify-content: flex-end;
margin-left: auto;
margin-right: 0;
flex-wrap: wrap;
display: flex;
}
.main-nav {
list-style-type: none;
overflow: hidden;
display: block;
}
.main-nav li{
float: left;
padding: 10px 20px 10px 20px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
font-style: normal;
text-decoration: none;
line-height: 24px;
letter-spacing: .75px;
color: #1e1e1e;
}
.main-nav li:hover {
color: #1e1e1e75;
cursor: pointer;
transition: .4s;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
transform: translateX(calc(-50%));
max-width: 1000px;
margin-top: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.sub-menu {
list-style-type:none;
overflow:hidden;
display: flex;
box-shadow: 0px 0px 2px 0px rgb(30 30 30 / 25%) !important;
z-index: 3px;
border-radius: 8px;
width: 100%;
}
.sub-menu li {
float: left;
padding: 24px 32px !important;
width: 100%;
}
.sub-menu li:hover {
cursor: pointer;
}
.item1 {
border-right: 1px solid #f2f2f2;
}
.product {
display: block;
font-size: 20px;
font-weight: 700px;
color: #1e1e1e;
}
.tagline {
display: block;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: .44px;
text-transform: none;
color: #1e1e1e;
}
.g4-sub-tabs {
list-style: none;
text-align: left;
padding-left: 0px;
}
.g4-sub-tabs li {
margin: 0px !important;
padding: 0px !important;
}
.li-sub-tab {
padding-left: 25px;
}
#check, .open-menu, .close-menu {
display: none;
}
#media only screen and (max-width: 959px) {
.open-menu, .close-menu {
position: absolute;
color: #1e1e1e;
cursor: pointer;
font-size: 1.5rem;
}
.open-menu {
right: 20px;
transform: translateY(-50%);
}
.close-menu {
top: 20px;
right: 20px;
}
#check {
display: none;
}
.main-navigation-bar {
height: 100vh;
display: block;
}
.section-2 {
width: 100%;
}
.mobile-menu {
flex-direction: column;
align-items: center;
justify-content: center;
}
.mobile-menu li {
width: 100%;
top: 0;
right: 0;
z-index: 100;
transition: all 0.2s ease-in-out;
}
.dropdown-content {
display: block;
position: absolute;
z-index: 1;
transform: translateX(calc(0%));
max-width: auto;
margin-top: 10px;
}
.sub-menu {
list-style-type:none;
overflow:hidden;
display: block;
box-shadow: 0px 0px 2px 0px rgb(30 30 30 / 25%) !important;
z-index: 0px;
border-radius: 8px;
width: 100%;
}
.sub-menu li {
float: left;
padding: 24px 32px !important;
width: 100%;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<header>
<div class="main-navigation-bar">
<div class="section-1">
<div class="logo-box">
<h1>Logo</h1>
</div>
</div>
<input type="checkbox" id="check">
<div class="section-2">
<nav>
<ul class="main-nav">
<span class="mobile-menu">
<span class="dropdown">
<li>Products
<span class="sub-arrow">
<i class="fas fa-chevron-down"></i>
</span></span>
<span class="dropdown-content">
<ul class="sub-menu">
<li class="item1 "><span class="product">1A</span><p class="tagline">Lorem ipsum solor sal</p>
<ul class="g4-sub-tabs">
<li>•<span class="li-sub-tab">Link</span></li>
<li>•<span class="li-sub-tab">Link</span></li><li>•<span class="li-sub-tab">Link</span></li>
</ul>
</li>
<li class"item2"><span class="product">1B</span><p class="tagline">lorem ipsum dolor sal</p></li>
</ul>
</span>
</li>
<li>Resources</li>
<li>Company</li>
<li>Careers</li>
<li>Contact Us</li>
<label for="check" class="close-menu"><i class="fas fa-times"></i></label>
</span>
<label for="check" class="open-menu"><i class="fas fa-bars"></i></label>
</ul>
</nav>
</div>
</div>
</header>

Answer 1

Simply use the CSS display rule and toggle none.
if (document.getElementById("btn")) {
document.getElementById("btn").addEventListener("click", function (evt) {
toggleDisplay(evt);
});
}
function toggleDisplay(evt){
document.getElementById("first").classList.toggle("hidden");
}
.hidden {
display: none;
}
<header>
<div class="main-navigation-bar">
<button id="btn">toggle me</button>
<div class="section-1">
<div class="logo-box">
<h1>Logo</h1>
</div>
</div>
<div class="section-2">
<nav>
<ul class="main-nav">
<span class="mobile-menu">
<span class="dropdown">
<li>Products
<span class="sub-arrow">
<i class="fas fa-chevron-down"></i>
</span></span>
<span class="dropdown-content">
<ul class="hidden" id="first">
<li class="item1 "><span class="product">1A</span><p class="tagline">Lorem ipsum solor sal</p>
<ul class="g4-sub-tabs">
<li>•<span class="li-sub-tab">Link</span></li>
<li>•<span class="li-sub-tab">Link</span></li><li>•<span class="li-sub-tab">Link</span></li>
</ul>
</li>
<li class"item2"><span class="product">1B</span><p class="tagline">lorem ipsum dolor sal</p></li>
</ul>
</span>
</li>
<li>Resources</li>
<li>Company</li>
<li>Careers</li>
<li>Contact Us</li>
<label for="check" class="close-menu"><i class="fas fa-times"></i></label>
</span>
<label for="check" class="open-menu"><i class="fas fa-bars"></i></label>
</ul>
</nav>
</div>
</div>
</header>