我有一个水平导航和一个水平子导航。我试图让子导航换行并放到一个新行,同时将其下方的内容向下推。我遇到了麻烦,因为子导航是绝对的。
有没有办法在不绝对定位的情况下创建水平导航?
这是我目前拥有的 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>
示例和代码是完整导航的精简版本。
最佳答案
我将子导航的位置更改为从父级继承。
结果在这里: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;
}
关于html - 有没有办法创建没有绝对位置的水平子导航?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33876323/