Wordpress 5.7，主题 2021。如何将主菜单子菜单项更改为白色

Question

Wordpress 5.7，主题 2021。

1 如何更改主菜单中子菜单项的颜色？ 我是 Wordpress 新手，具有 CSS 基础/中级知识。

2 如何更改主菜单和子菜单的背景颜色？

这个附加的 CSS 使主菜单项变为白色。我想对子菜单做同样的事情。

*start of menu */
/*menu background */
.menu-wrapper {
background: rgba(204,153,51,.75);
}

a#primary-menu-list {
color:white;
}

.primary-navigation .primary-menu-container > ul > .menu-item > a
{color:white;}

.svg-icon
{color:white;}

/*end of menu */

Answer 1

因为这个主题现在支持 CSS 变量 - 我建议你不要覆盖选择器，而只覆盖变量。您需要将这些行添加到 CSS 中，替换为您真正想要使用的颜色，并确保它们覆盖默认样式

:root {
    --primary-nav--color-link:  #ffffff;
    --primary-nav--color-link-hover: #cecece;
    --primary-nav--color-text: #000000;
}

这是主导航的可用变量列表

--primary-nav--font-family: var(--global--font-secondary);
--primary-nav--font-family-mobile: var(--global--font-primary);
--primary-nav--font-size: var(--global--font-size-md);
--primary-nav--font-size-sub-menu: var(--global--font-size-xs);
--primary-nav--font-size-mobile: var(--global--font-size-sm);
--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
--primary-nav--font-size-button: var(--global--font-size-xs);
--primary-nav--font-style: normal;
--primary-nav--font-style-sub-menu-mobile: normal;
--primary-nav--font-weight: normal;
--primary-nav--font-weight-button: 500;
--primary-nav--color-link: var(--global--color-primary);
--primary-nav--color-link-hover: var(--global--color-primary-hover);
--primary-nav--color-text: var(--global--color-primary);
--primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
--primary-nav--border-color: var(--global--color-primary);

Answer 2

尝试 1： 我的 CSS 失败了，但后来仔细查看：

插件：二十一二十一的选项（免费版） 自定义导航选项

设置导航背景颜色：选择相关颜色

尝试 2： 没有插件

当我使用 + 键触发下拉菜单时效果很好 如果我单击子菜单标题，则标题很难阅读（白色背景上的白色文本）。

附加 CSS

:root {
/*submenu color */
    --primary-nav--color-link:  white;
/*main menu color */
    --primary-nav--color-link-hover: white;
    
/* where does this take effect?
--primary-nav--color-text: red;
*/
  --primary-nav--color-text: #000000;
      
        
}
/*this is the background of the main menu only, not submenu */
.menu-wrapper {
background: rgba(204,153,51,.75);
}


/*
 this is for the submenu (drop down menus)
*/

.primary-navigation .sub-menu .menu-item>a { color: var(--primary-nav--color-link); 
background:rgba(204,153,51,.75); */


}

.svg-icon
{color:white;}