css - 横向多级菜单

Question

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 菜单项放置在右侧

Answer 1

给 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;
}