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是您的父li，.sub-menu是您的ul而子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%;
        }

特定Wordpress菜单项的自定义CSS

1 个答案: