https://jsfiddle.net/ccaf8msu/1/
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-right">
<li class="first leaf"><a href="/front">Frontpage</a></li>
<li class="leaf"><a href="/library" class="container-one">Library</a></li>
<li class="expanded active-trail active"><a href="/om-websitet" class="active-trail active">About the website</a>
<ul class="nav navbar-nav navbar-right">
<li class="first leaf"><a href="/en-sode">About the book</a></li>
<li class="last leaf"><a href="/en-sode">The authors</a></li>
</ul>
</li>
<li class="leaf"><a href="/categories" class="container-two">Categories</a></li>
<li class="last leaf webshop-link"><a href="http://google.dk">Webshop</a></li>
</ul>
</nav>
我有这个 2 级菜单,并希望两个级别都是水平的,如图所示。问题是当第二级处于活动状态时,菜单项“关于网站”在该元素后有很多空白。
我需要的是去除空白,并将 2.level 菜单项放置在右侧
最佳答案
给 li position:relative
和内部 ul position:absolute
添加样式
nav.navbar-default {
width: 100%;
}
ul {
list-style: none;
}
ul li {
float: left;
position: relative;
}
li ul{
position:absolute
}
li a {
display: block;
height: 55px;
margin: 0 20px;
}
关于css - 横向多级菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38046460/