Css 在wordpress中，子菜单未正确显示

请参阅下面的代码。这是主页上的菜单

<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个子菜单（语音和数据）

问题是，它只显示最后一个菜单项。（即只显示<代码>数据。不显示<代码>语音）。如下图所示

请参见中的图像

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

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

---

这将修复您的子菜单。问题是，子菜单的列表项被设置为内联块，并相互重叠。

您的子菜单

ul

和子菜单

li

都继承了顶层菜单的宽度和显示类型样式，这些样式对子菜单不正确

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

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