Html 有没有办法在没有绝对位置的情况下创建水平副导航？

我有一个水平导航和一个水平副导航。我正试图让子导航包装和下降到一个新的行，同时按下它下面的内容。我有麻烦了，因为副导航是绝对的

有没有一种方法可以创建水平导航而不将其定位为绝对导航

以下是我目前拥有的一把小提琴：

CSS

HTML

海莉，如果导航系统关闭，我应该按下

---

示例和代码都是非常精简的完整导航版本。

我将子导航的位置更改为从父导航继承

结果如下：

这就是你要找的吗

CSS

ul {
    text-align: justify;
}
ul:after {
    content:'';
    display: inline-block;
    width: 100%;
}
ul li {
    display: inline-block;
}
ul li ul {
    position: inherit;
}

---

你试过把position:relative放在ulli上吗？这将使每个子导航位置相对于其父导航位置，而不是相对于页面。

<nav>
    <ul>
        <li>
            <a href="#">Link</a>
            <ul>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
            </ul>
        </li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>
<p>Haiiiii, I should push down if the nav wraps.</p>

ul {
    text-align: justify;
}
ul:after {
    content:'';
    display: inline-block;
    width: 100%;
}
ul li {
    display: inline-block;
}
ul li ul {
    position: inherit;
}