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级菜单，并希望两个级别都是水平的，如图所示。问题是当第二级处于活动状态时，以及关于网站的菜单项＆＃39;在项目之后获得了很多空白。

我需要的是摆脱空白，并将2.level菜单项置于右侧

Answer 1

有一个空格，因为您的下拉列表是1）在DOM顺序中的<li>之后但是2）在它转到下一个<li>之前仍占用空间。

您需要做的是将下拉列表设置为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;
}

水平多级菜单

2 个答案: