如何使子<ul>元素采用其父<li>宽度

Question

我有一个下拉菜单，由嵌套在另一个ul的列表项绝对位置的ul组成。事实上，我希望表示dd菜单的子ul采用其父li宽度，但它采用其父ul宽度。将位置更改为相对位置会破坏li风格/顺序，不知道为什么。

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">
<a href="#">All Catgories</a>
</div>
<ul class="dropdown-content">
<li> <a href="#">Link1</a></li>
<li> <a href="#">Link2</a></li>
<li> <a href="#">Link3</a></li>
</ul>
</li>
<li>
<div><a href="#">Shop by brand</a></div>
</li>
<li>
<div><a href="#">Online Exclusive</a></div>
</li>
</ul>
</nav>

Answer 1

当需要将元素相对于其父元素position: absolute时，需要父元素拥有自己的堆叠上下文。因此，父对象成为offsetParent——其偏移边界将用于定位。

在您的情况下，必须将position: relative设置为li.dropdown
然后，在ul.dropdown-content上，设置left: 0; right:0;以在左右边界之间拉伸它，使其占用父对象宽度的100%：

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">
<a href="#">All Catgories</a>
</div>
<ul class="dropdown-content">
<li> <a href="#">Link1</a></li>
<li> <a href="#">Link2</a></li>
<li> <a href="#">Link3</a></li>
</ul>
</li>
<li>
<div><a href="#">Shop by brand</a></div>
</li>
<li>
<div><a href="#">Online Exclusive</a></div>
</li>
</ul>
</nav>