Горизонтальное меню многоуровневая

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

Там есть пробелы, потому что ваш раскрывающийся 1) после того, как <li> в порядке DOM, но 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

Добавить стиль литий position:relative и внутренней ул 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; 
}