html - 特定 Wordpress 菜单项的自定义 CSS

Question

我需要通过自定义 CSS 更改 li ul li 的 CSS，我已经为它们编写了一个自定义类并尝试通过 WP-ADMIN 分配它，但它是无效的。

<li id="menu-item-10088" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children submenu hover"><a href="http://www.example.com/company/">Company</a>
<ul class="sub-menu " style="display: block; overflow: hidden; height: 31.90023458481924px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">
    <li id="menu-item-10817" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://www.example.com/company/">About Us</a></li>
    <li id="menu-item-10818" class="aboutus menu-item menu-item-type-custom menu-item-object-custom"><a href="http://www.example.com/company/management-team/">Management Team</a></li>
    <li id="menu-item-11137" class="aboutus menu-item menu-item-type-custom menu-item-object-custom"><a href="http://www.example.com/company/#company-2">Vision</a></li>
    <li id="menu-item-10820" class="aboutus menu-item menu-item-type-custom menu-item-object-custom last-item"><a href="http://www.example.com/company/#company-3">Careers</a></li>
</ul>
<span class="menu-toggle"></span></li>

我添加了如下自定义类，并在相应的 WP 菜单项中提到了它

#Header .sub-menu .aboutus li ul li {
    font-weight: normal;
    padding: 0;
    position: relative;
    width: 100%;
    }

但是没用，我只需要将上面代码中提到的菜单项的宽度设置为 100%

Answer 1

<ul class="sub-menu " style="display: block; overflow: hidden; height: 31.90023458481924px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">
    <li id="menu-item-10817" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://www.example.com/company/">About Us</a></li>
    <li id="menu-item-10818" class="aboutus menu-item menu-item-type-custom menu-item-object-custom"><a href="http://www.example.com/company/management-team/">Management Team</a></li>
    <li id="menu-item-11137" class="aboutus menu-item menu-item-type-custom menu-item-object-custom"><a href="http://www.example.com/company/#company-2">Vision</a></li>
    <li id="menu-item-10820" class="aboutus menu-item menu-item-type-custom menu-item-object-custom last-item"><a href="http://www.example.com/company/#company-3">Careers</a></li>
</ul>

根据您的 HTML，li是你的 parent li , .sub-menu是你的 ul和 child li有课.aboutus , 所以它应该像下面这样

#Header li .sub-menu li.aboutus {
    font-weight: normal;
    padding: 0;
    position: relative;
    width: 100%;
    }

即使是以下内容也能正常工作，因为您无需引用 li如果sub-menu将仅出现在嵌套的 li 中

 #Header .sub-menu li.aboutus {
        font-weight: normal;
        padding: 0;
        position: relative;
        width: 100%;
        }