position:absolute搭配display:flex元素挤压？导航栏下拉菜单错位求助

我的导航栏包含4个<li>元素，期望鼠标悬停时，对应<li>下方显示带有3个链接的下拉菜单。但触发:hover显示下拉菜单后，其余3个<li>元素会被挤到导航栏下方，本该保持原位不动。我尝试给nav ul li设置position:absolute，结果所有<li>元素相互堆叠在一起。

导航栏正常状态

鼠标悬停后的异常状态

设置nav ul li {position:absolute;}后的状态

我的代码 #

HTML代码 #

<nav>
    <ul>
        <li>
            <button>Home</button>
            <div class="dropdown-content">
                <a href="#">Link A</a>
                <a href="#">Link B</a>
                <a href="#">Link C</a>
            </div>
        </li>
        <li>
            <button>Profile</button>
            <div class="dropdown-content">
                <a href="#">Link A</a>
                <a href="#">Link B</a>
                <a href="#">Link C</a>
            </div>
        </li>
        ...
    </ul>
</nav>

CSS代码 #

nav {
    border-bottom: 0.1rem rgb(228, 220, 220) solid;
    position:fixed;
    width: 100%;
    z-index: 5;
    height: 3rem;
    background-color: white;
    top:0;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 50%;
    margin-left: 25%;
    position: absolute;
}

nav ul li {
    /* position:absolute; */
    list-style: none;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

nav ul li button {
    background-color: transparent;
    border: none;
    font-size: medium;
}

.dropdown-content {
    display: none;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border: 0.1rem rgb(228, 220, 220) solid;
    border-top: none;
    margin-top: 0.8rem;
    width: 5rem;
}

.dropdown-content a {
    background-color: white;
    padding: 0.4rem 0 0.4rem;
}

.dropdown-content a:hover {
    background-color: whitesmoke;
}

nav ul li:hover .dropdown-content {
    display: flex;
}

解决方案 #

问题根源是下拉菜单默认占据文档流空间，导致其他元素被挤开。正确做法是让下拉菜单脱离文档流，同时给父元素<li>设置相对定位，确保下拉菜单相对于对应按钮定位：

1. 给nav ul li添加相对定位，作为下拉菜单的定位容器：

nav ul li {
    position: relative; /* 添加此行 */
    list-style: none;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

2. 修改.dropdown-content的定位规则，让它悬浮在页面上方且对齐父元素：

.dropdown-content {
    display: none;
    position: absolute; /* 添加绝对定位 */
    top: 100%; /* 定位到父元素底部 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 修正居中偏移 */
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border: 0.1rem rgb(228, 220, 220) solid;
    border-top: none;
    margin-top: 0; /* 移除margin-top，用top控制位置 */
    width: 5rem;
}

修改后，下拉菜单不会占据文档流空间，其他<li>元素位置保持不变，同时下拉菜单会精准显示在对应按钮的正下方。

内容的提问来源于stack exchange，提问作者logan_9997