Responsive dropdown - html

Question

I created a dropdown using CSS. The dropdown pops up when the elements of nav-bar are hovered. There is no error in the code. However, I need help with the styling of the nav-bar. I want all the elements in sub-menu to be in the same line, i.e, I want to elements of drop-down to be in same position while changing the information based on the element hovered in nav-bar. Reference can be drop-down on lululemon website.
nav {
display: inline-flex;
width: 100%;
}
.nav-list {
display: flex;
width: 100%;
margin-top: .7rem;
padding-left: 1.1rem;
}
.nav-list li {
position: relative;
}
.nav-list>li>a {
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
transition: color 300ms;
}
.sub-menu a {
position: relative;
top: 2rem;
color: #ffffff;
font-size: 1.1rem;
font-weight: 200;
padding: 0 40px 0 40px;
}
.sub-menu {
display: flex;
position: absolute;
box-sizing: border-box;
background-color: black;
visibility: hidden;
box-sizing: border-box;
width: 50rem;
height: 15rem;
}
.nav-list li:hover>.sub-menu {
top: 3.85em;
visibility: visible;
opacity: 1;
}
<nav>
<ul class="nav-list">
<li>
Men
<ul class="sub-menu">
<li>
Mens shirts
</li>
<li>
Mens Shorts
</li>
<li>
Mens Accessories
</li>
</ul>
</li>
<li>
Women
<ul class="sub-menu">
<li>
Womens shirts
</li>
<li>
Womens Shorts
</li>
<li>
Womens Accessories
</li>
</ul>
</nav>

Answer 1

nav {
display: inline-flex;
width: 100%;
}
.nav-list {
display: flex;
width: 100%;
margin-top: .7rem;
padding-left: 1.1rem;
position: relative;
}
.nav-list li {
position: relative;
}
.nav-list>li>a {
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
transition: color 300ms;
}
.sub-menu a {
color: #ffffff;
font-size: 1.1rem;
font-weight: 200;
padding: 0 40px 0 40px;
}
.sub-menu {
display: flex;
position: fixed;
box-sizing: border-box;
background-color: black;
visibility: hidden;
width: 50rem;
height: 15rem;
left: 20px;
top: 0;
}
.nav-list li:hover>.sub-menu {
top: 3.85em;
visibility: visible;
opacity: 1;
}
<nav>
<ul class="nav-list">
<li>
Men
<ul class="sub-menu">
<li>
Mens shirts
</li>
<li>
Mens Shorts
</li>
<li>
Mens Accessories
</li>
</ul>
</li>
<li>
Women
<ul class="sub-menu">
<li>
Womens shirts
</li>
<li>
Womens Shorts
</li>
<li>
Womens Accessories
</li>
</ul>
</nav>
I made some changes to your code...basically position: fixed did the job. You can set the left value according to your need.

Answer 2

Is this what you needed?
The problem was that the position:relative was at the wrong place, it must be applied to the .nav-list, since its the parent of .sub-menu and you need it to be aligned according to it.
nav {
display: inline-flex;
width: 100%;
}
.nav-list {
display: flex;
position:relative;
width: 100%;
margin-top: .7rem;
padding-left: 1.1rem;
}
.nav-list>li>a {
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
transition: color 300ms;
}
.sub-menu a {
position: relative;
color: #ffffff;
font-size: 1.1rem;
font-weight: 200;
padding: 0 40px 0 40px;
}
.sub-menu {
display: flex;
align-items:center;
position: absolute;
left:0px;
box-sizing: border-box;
background-color: black;
visibility: hidden;
box-sizing: border-box;
width: 50rem;
height: fit-content;
}
.nav-list li:hover >.sub-menu {
top: 3.85em;
visibility: visible;
opacity: 1;
}