在wordpress中，子菜單顯示不正確

Question

請參閱我的以下代碼。這是主頁中的菜單，

<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"> 
<a href="http://localhost/project/service/">Service</a> 
    <ul class="sub-menu"> 
     <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://localhost/project/services/voice/">Voice</a></li> 
     <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://localhost/project/services/data/">Data</a></li> 
    </ul> 
</li> 

它顯示正確。主菜單（服務）有2個子菜單​​（語音&數據）。

問題是，它只顯示最後一個菜單項（僅顯示data，沒有顯示voice）。請參閱下面的圖像，

看到圖像中following link

如果我增加一個子意味着，只有3顯示。

Answer 1

.main-navigation ul li ul li { 
    display: block; 
} 

這應該修復你的子菜單。問題在於子菜單的列表項目被設置爲內嵌塊並且彼此重疊。

Answer 2

您的子菜單ul和子菜單li都是從頂層菜單中繼承寬度和顯示類型樣式，但子菜單不正確。

.main-navigation ul li ul li { 
    display: block; 
    width: 100% 
} 

.main-navigation ul li ul { 
    width: 100% 
}