Dropdown佈局問題（下拉li的寬度大於head li）

我無法以正確的方式顯示下拉菜單。這是我在這裏看到：Dropdown佈局問題（下拉li的寬度大於head li）

enter image description here

這是我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; }

我想有像這樣：

enter image description here

但我該怎麼做？

來源

2014-09-01 nielsv

添加到你的CSS：

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

說明：你是浮動的li元素，但你需要清除的float元素li（那些在子菜單）的第二級，從而你需要添加這個聲明。

See fiddle here

來源

2014-09-01 20:58:45 Devin

Dropdown佈局問題（下拉li的寬度大於head li）

回答

相關問題