在 wordpress 中，子菜单无法正确显示答案

【问题标题】：In wordpress, sub-menu not displaying properly在 wordpress 中，子菜单无法正确显示
【发布时间】：2013-04-11 14:44:21
【问题描述】：

请参阅我的以下代码。也就是首页的菜单，

<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中的图片

如果我再添加一个子菜单，则仅显示第三个。

【问题讨论】：

标签： css wordpress menu

【解决方案1】：

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

这应该会修复您的子菜单。问题是子菜单的列表项被设置为内联块并且彼此重叠。

【讨论】：

【解决方案2】：

您的子菜单 ul 和子菜单 li 都从顶级菜单继承了不适合子菜单的宽度和显示类型样式。

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

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

【讨论】：