How to make child <ul> element to take its parent <li> width - html

Question

I have a dropdown menu consists of ul nested in another ul's list item position absolute.
indeed I want the child ul that represents the dd menu to take its parent li width but it takes its grandparent's ul width instead.
changing the position to relative will disrupt the li style/order don't know why.
nav {
position: relative;
display: flex;
width: 100%;
margin: 0 auto;
justify-content: space-between;
}
nav>ul.nav_list {
position: relative;
display: flex;
justify-content: space-around;
align-items: flex-start;
height: 40px;
}
nav>ul>li {
height: 100%;
margin: 0px 4px;
padding: 0px 8px;
font-size: 18px;
}
nav>ul>li>div {
border-bottom: 2px solid #D88B1D;
padding: 8px 9.5px 2px;
transition: border-bottom .1s;
line-height: 22px;
}
nav>ul>li>div:hover {
border-bottom: 4px solid #D88B1D;
}
.first {
display: flex;
justify-content: center;
width: 242px;
}
li.dropdown {
font-size: 18px;
font-weight: bold;
}
.dropdown:hover {
display: flex;
justify-content: center;
background-color: #42526e;
border-radius: 5px 5px 0px 0px;
}
.dropdown:hover>div.first {
border: none;
}
nav>ul>li>ul.dropdown-content {
position: absolute;
top: 100%;
left: 0;
width: 100%;
display: none;
background-color: gold;
z-index: 99;
}
li.dropdown:hover>ul.dropdown-content {
display: block;
}
.dropdown:hover>div.first>a {
color: white;
}
<nav>
<ul class="nav_list">
<li class="dropdown">
<div class="first">
All Catgories
</div>
<ul class="dropdown-content">
<li> Link1</li>
<li> Link2</li>
<li> Link3</li>
</ul>
</li>
<li>
<div>Shop by brand</div>
</li>
<li>
<div>Online Exclusive</div>
</li>
</ul>
</nav>

Answer 1

When you need to position: absolute an element relatively to its parent, you need the parent to have it's own stacking context. So the parent becomes an offsetParent -- its offset boundaries will be used for positioning.
In your case, you have to set position: relative to li.dropdown.
Then, on ul.dropdown-content, set left: 0; right:0; to stretch it between left and right boundaries so it takes 100% of parent's width:
nav>ul.nav_list {
display: flex;
justify-content: space-around;
align-items: flex-start;
height: 40px;
}
nav>ul>li {
height: 100%;
margin: 0px 4px;
padding: 0px 8px;
font-size: 18px;
}
nav>ul>li>div {
border-bottom: 2px solid #D88B1D;
padding: 8px 9.5px 2px;
transition: border-bottom .1s;
line-height: 22px;
}
nav>ul>li>div:hover {
border-bottom: 4px solid #D88B1D;
}
.first {
text-align: center;
width: 242px;
}
li.dropdown {
font-size: 18px;
font-weight: bold;
position:relative;
}
.dropdown:hover {
background-color: #42526e;
border-radius: 5px 5px 0px 0px;
}
.dropdown:hover>div.first {
border: none;
}
nav>ul>li>ul.dropdown-content {
position: absolute;
top: 100%;
right:0; left: 0;
display: none;
background-color: gold;
}
li.dropdown:hover>ul.dropdown-content {
display: block;
}
.dropdown:hover>div.first>a {
color: white;
}
<nav>
<ul class="nav_list">
<li class="dropdown">
<div class="first">
All Catgories
</div>
<ul class="dropdown-content">
<li> Link1</li>
<li> Link2</li>
<li> Link3</li>
</ul>
</li>
<li>
<div>Shop by brand</div>
</li>
<li>
<div>Online Exclusive</div>
</li>
</ul>
</nav>