在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% 
}