Q:

Dropdown layout issue (dropdown li's width bigger then head li)

I'm having trouble showing a drop down menu in the correct way.  This is what I get to see:

This is my HTML code:
<nav class="menuBox">
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="klassementen.html">KLASSEMENTEN</a></li>
        <li><a href="#">KALENDER</a></li>
        <li><a href="nieuws.html">NIEUWS</a></li>
        <li><a href="media.html">MEDIA</a></li>
        <li><a href="#">LINKS</a></li>
        <li>
            <a href="mijnteam.html">INLOGGEN</a>
            <ul>
                <li class="first">        
                    <a href="/app_dev.php/admin/dashboard">ADMIN</a>        
                </li>
                <li>        
                    <a href="/app_dev.php/user/edit">EDIT ACCOUNT</a>        
                </li>
                <li class="last">        
                    <a href="/app_dev.php/logout">LOG OUT</a>        
                </li>
            </ul>
        </li>
    </ul>
</nav>

My CSS code:
/* ### menu Box ### */
.menuBox { position: absolute; top: 74px; right: 2px; }
.menuBox ul { list-style: none; }
.menuBox li { float: left; margin-left: 17px; font-size: 14px; text-transform: uppercase; }
.menuBox li a { color: #3f3f3f; text-decoration: none; display: block; padding-bottom: 14px; }
.menuBox li a:hover { background: url(../images/menu_hover.png) repeat-x 0 bottom; }
.menuBox ul li ul{ display: none; }
.menuBox ul li:hover ul{  display: block; }

I would like to have something like this:

But how can I do this? 

A:

add this to your CSS:
.menuBox ul li ul li {
    display: block;
    float:none;
}

Explanation: you're floating your li elements, but you need to clear the floats for the second level of li elements (those in the sub menus), thus you need to add this declaration. 
See fiddle here 

