Horizontal Multi-Level-Menü

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> 

Ich habe diese 2 Ebenen-Menü, und wollen beide Ebenen wie gezeigt horizontal sein. Das Problem tritt auf, wenn die zweite Ebene aktiv ist und der Menüpunkt "Über die Website" nach dem Objekt eine Menge Leerzeichen enthält.

Was ich brauche, ist der Leerzeichen zu entfernen, und positioniert, um die 2.level Menüpunkte auf der rechten Seite

Answer 1

Es gibt ein Leerzeichen, weil Ihre Drop-Down-1), nachdem die <li> in der DOM-Ordnung, aber 2) noch nimmt Platz ein, bevor es zum nächsten <li> geht.

Was Sie tun müssen, ist Ihre Dropdowns auf position: absolute zu setzen, so dass es Ihre anderen Elemente nicht bewegt.

Auch im Jahr 2016 ist es wahrscheinlich am besten, floats zu vermeiden und flexbox für Ihre Layouts zu verwenden, da es viel leistungsfähiger ist.

Hier ist ein Arbeits Code ohne Leerraum:

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

Und hier ist die Fiddle.

Answer 2

Stil, um li position:relative und innere 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; 
}