html - 有没有办法创建没有绝对位置的水平子导航？

Question

我有一个水平导航和一个水平子导航。我试图让子导航换行并放到一个新行，同时将其下方的内容向下推。我遇到了麻烦，因为子导航是绝对的。

有没有办法在不绝对定位的情况下创建水平导航？

这是我目前拥有的 fiddle :http://jsfiddle.net/eqqqmra7/

CSS

ul {
    text-align: justify;
}
ul:after {
    content:'';
    display: inline-block;
    width: 100%;
}
ul li {
    display: inline-block;
}
ul li ul {
    position: absolute; /* Trying to take this out so it pushes content down */
}

HTML

<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>

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

Answer 1

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

结果在这里:http://jsfiddle.net/eqqqmra7/1/

这就是您要找的吗？

CSS

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