purecss下拉菜單中我使用的嘗試使用purecss庫創建垂直下拉菜單不工作

Question

，但沒有成功

purecss.io/menus/ 

我的CSS代碼如下所示：

<div class="pure-menu custom-restricted-width"> 
    <ul class="pure-menu-list"> 
     <li class="pure-menu-item pure-menu-has-children"> 
      <a href="#" id="menuLink1" class="pure-menu-link">T-Shirts</a> 
      <ul class="pure-menu-children"> 
       <li class="pure-menu-item"> 
        <a class="pure-menu-link" href="t-shirts-rundhals-tx-2-1,-1-2-.html">Rundhals</a> 
       </li> 
       <li class="pure-menu-item"> 
        <a class="pure-menu-link" href="t-shirts-v-neck-tx-3-1,-1-3-.html">V-Neck</a> 
       </li> 
       <li class="pure-menu-item"> 
        <a class="pure-menu-link" href="t-shirts-longsleeve-tx-4-1,-1-4-.html">Longsleeve</a> 
       </li> 
       <li class="pure-menu-item"> 
        <a class="pure-menu-link" href="t-shirts-tanktop-tx-124-1,-1-124-.html">Tanktop</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

即使我複製粘貼其文檔中的示例代碼及其不工作得太

jsBin

Answer 1

它工作正常，只需添加css爲custom-restricted-width，因爲您的pure-menu div內容的屏幕寬度爲100％，因此您無法顯示下拉菜單。

.custom-restricted-width{ 
    display:inline-block; 
}