下拉布局问题（下拉li的宽度大于head li）

Question

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

这是我的 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>

我的 CSS代码：

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

我想有这样的事情：

但我怎么能这样做？

Answer 1

将此添加到您的CSS：

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

说明：您正在浮动li元素，但是您需要清除第二级li元素（子菜单中的元素）的浮点数，因此您需要添加这个宣言。

See fiddle here