水平多级菜单

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

这里有一个空格，因为您的dropdown是1)在DOM顺序中的<li>之后，但2)在它转到下一个<li>之前仍然占用空间。

您需要做的是将dropdowns设置为position: absolute，这样它就不会移动其他元素。

此外，在2016年，最好避免浮点数，并使用flexbox进行布局，因为它的功能要强大得多。

下面是一个没有空格的工作代码：

CSS:

nav.navbar-default {
    width: 100%; 
}

ul {
    list-style: none;
    display: flex;
}

ul li {
    justify-content: flex-start;
    position: relative;
}

.navbar-right {
    position: absolute;
    top: 100px;
    left: 0;
}

li a {
    display: block;
    height: 55px;
    margin: 0 20px;
}

这是Fiddle。

Answer 2

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