Horizontal multi level menu - css

Question

https://jsfiddle.net/ccaf8msu/1/
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-right">
<li class="first leaf">Frontpage</li>
<li class="leaf">Library</li>
<li class="expanded active-trail active">About the website
<ul class="nav navbar-nav navbar-right">
<li class="first leaf">About the book</li>
<li class="last leaf">The authors</li>
</ul>
</li>
<li class="leaf">Categories</li>
<li class="last leaf webshop-link">Webshop</li>
</ul>
</nav>
I have this 2 levels menu, and want both levels be horizontal as shown. The issue is when second level is active, and menu item 'about the website' gets a lot of whitespace after the item.
What i need is to get rid of the whitespace, and positioned the 2.level menu items to the right

Answer 1

Add style to li position:relative and inner 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;
}

Answer 2

There's a whitespace because your dropdown is 1) after the <li> in the DOM order but 2) still takes up space before it goes to the next <li>.
What you need to do is set your dropdowns to have position: absolute so that it doesn't move your other elements around.
Also, in 2016, it's probably best to avoid floats and use flexbox for your layouts as it is much more powerful.
Here's a working code without white space:
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;
}
And here's the Fiddle.