Html 下拉布局问题（下拉列表的宽度大于标题li）

我无法正确显示下拉菜单。这就是我看到的：

这是我的HTML代码：

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

/* ### 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; }

我想要这样的东西：

但是我如何才能做到这一点呢？

将此添加到您的CSS中：

.menuBox ul li ul li {
    display: block;
    float:none;
}

说明：您正在浮动

li

元素，但需要清除第二级

li

元素（子菜单中的元素）的浮动，因此需要添加此声明