Wordpress子主题CSS规则显示：无法覆盖

Question

我有这个DOM树：

<ul id="menu-horizontalnav" class="menu">

    <li id="menu-item-19">

        <ul class="sub-menu">
            <li id="menu-item-99" ></li>

        </ul>
    </li>

</ul>

现在我希望隐藏<ul class="sub-menu">及其子内容。 我在我的style.css文件中添加了一个新的.css规则：

但正如你所看到的那样，它被这条规则所覆盖：

如果我停用display: block;一切正常。

我的问题是如何添加.css规则，该规则仅对class="sub-menu"有效 没有通过规则.menu ul

覆盖此规则

在我从.css规则的理解中，display: none;规则应该覆盖。{ display: block;规则，因为它在较高的范围内更深层次

我在我的子主题

的style.css文件中添加了我的代码

Answer 1

添加

  hideMenu
  {   
    display:none !important;
  }

每当您想要隐藏时，请使用addClass添加此类，或者只添加该属性。

每当您要删除此内容时，removeClass或删除该属性。

Answer 2

一种简单的方法是通过将CSS规则标记为重要来覆盖CSS规则：

.sub-menu {
    display: none !important;
}

但是，如果可能various reasons，则应该避免这种技术。

更好的方法是明确地解决sub-menu类在css的DOM层次结构中占用的位置：

.menu ul.sub-menu {
    display: none;
}

此指令比仅使用.menu ul更具体，因此将成为浏览器的首选。

Answer 3

只需添加以下css：

ul .submenu {display:none !important;}

它应该解决你的问题并覆盖ul.menu类