Question

这听起来好像是一个Wordpress问题，但是在Worpress Exchange上我被告知这是一个通用的CSS问题，对于Wordpress Exchange网站来说是不合时宜的。在有人将其作为Stack Overflow的话题而关闭之前，您可以看看它足够长的时间以确定它是否只是一个通用CSS问题？（我正在使用的主题也不提供对子主题开发的支持，因此我无法寻求帮助。）

我正在尝试更改默认菜单外观（在使用Genesis主题的Wordpress中，但是再次尝试假设这是通用CSS以外的任何东西，直到有人对其进行足够长的时间来确定它为止）。例如，默认情况下，菜单在白色背景上显示黑色文本。我想将其更改为绿色背景上的白色文本。我在浏览器的开发人员工具窗口中查看了标记。（标记在这篇文章的结尾。）

首先，我对主按钮菜单进行了这些更改。提出这个并不难。

li.menu-item a {
  color: #fff;
  background-color: #18ddb1;
}

但这不会改变子菜单的背景（当您将鼠标悬停在主菜单按钮上时，子菜单的背景会下降）。

我尝试将上述CSS与其他选择器一起使用，例如.sub-menu li，.sub-menu a和许多其他组合，但是没有改变下拉子菜单的背景颜色。我在做什么错了？

<nav id="genesis-nav-primary" 
     class="nav-primary genesis-responsive-menu">
  <div class="wrap">
    <ul id="menu-mine" 
        class="menu genesis-nav-menu menu-primary js-superfish sf-js-enabled
               sf-arrows"
        style="touch-action: pan-y;">
      <li id="menu-item-??" 
          class="menu-item menu-item-type-post_type
                 menu-item-object-page menu-item-??">
        <a class="sf-with-ul" href="...">
          <span itemprop="name"> ...menu item text... </span>
        </a>
        <button class="sub-menu-toggle>
        </button>
        <ul class="sub-menu">
          <li id="menu-item-??" class="menu-item menu-item-type-post_type
                 menu-item-object-page menu-item-??">
            <a href="...">
              <span> .. menu item text .. </span>
            </a>
          </li>
        </ul>
      </li>                  
    </ul>

  </div>
</nav>

如何设置子菜单的背景颜色？

0 个答案: