css - 使用与顶级菜单相同颜色的子菜单

Question

我正在为我正在创建的主题创建一个菜单。我遇到的问题是，如果我所在的页面有下拉菜单，子菜单的颜色将与顶部元素相同，我希望它与菜单的其余部分相匹配，在本例中为白色和黑色文本。任何帮助表示赞赏。提前致谢。

例子

编辑

生成菜单的代码(这是一个 wordpress 主题，所以不需要太多代码)

<nav class="site-nav">                  
    <?php 
    wp_nav_menu(array(
        'container_class' => 'main-nav',
        'container' => 'nav',
    )); 
    ?>
</nav>

注册菜单的代码(如果需要)

register_nav_menus(array(
    'primary' => __( 'Primary Menu' ),
    //'sidebar' => __( 'Sidebar Menu' ),
    //'footer' => __( 'Footer Menu' ),
));
add_theme_support( 'post-thumbnails' );

代码:

.site-nav {
  background: #fff;
  height: 50px;
  box-shadow: 0 0 5px #b5b5b5;
}

.site-nav nav ul li.current-menu-item a:link,
.site-nav nav ul li.current-menu-item a:visited,
.site-nav nav ul li.current-page_ancester a:link,
.site-nav nav ul li.current-page_ancester a:visited {
  background-color: black;
  color: #fff;
}

.main-nav ul,
.main-nav li {
  display: inline;
  list-style-type: none;
  list-style-image: none;
  padding: 0;
}

.main-nav a {
  padding: 0 20px 0 20px;
  text-decoration: none;
  line-height: 50px;
  display: block;
  color: black;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 15px;
  border-right: 1px solid #080808;
}

.main-nav a:hover {
  background: lightgray;
}

.main-nav ul ul a {
  width: 100px;
  padding: 0 20px;
  display: block;
  border-bottom: 1px solid #080808;
}

.main-nav ul li {
  position: relative;
  float: left;
}

.main-nav ul ul {
  position: absolute;
  top: -9999999px;
  left: 0;
  opacity: 0;
  background: #fff;
  text-align: left;
  box-shadow: 2px 2px 0 #b5b5b5;
}

.main-nav ul li:hover>ul {
  position: absolute;
  top: 100%;
  opacity: 1;
  left: 0;
}

.main-nav ul ul li:hover>ul {
  position: absolute;
  top: 0;
  opacity: 1;
  left: 140px;
}

.main-nav li.has-children>a:after {
  color: #000000;
  content: ' ↓';
  font-size: 15px;
  vertical-align: 0px;
}

.main-nav li li.has-children>a:after {
  color: #000000;
  content: ' →';
  font-size: 15px;
  vertical-align: 1px;
}

<nav class="site-nav">
  <nav class="main-nav">
    <ul id="menu-primary" class="menu">
      <li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-7 current_page_item menu-item-has-children menu-item-9"><a href="http://url_address/testfolder/wordpresstestfolder/" aria-current="page">Home</a>
        <ul class="sub-menu">
          <li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-6"><a href="http://url_address/testfolder/wordpresstestfolder/index.php/sample-page/">Sample Page</a>
            <ul class="sub-menu">
              <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://url_address/testfolder/wordpresstestfolder/index.php/test/">test</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://url_address/testfolder/wordpresstestfolder/index.php/test-2/">test 2</a></li>
      <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://url_address/testfolder/wordpresstestfolder/index.php/test-3/">test 3</a></li>
    </ul>
  </nav>
</nav>

Answer 1

嗨，兄弟，请将此 css 用于当前菜单样式

.site-nav nav ul li.current-menu-item > a:link,
.site-nav nav ul li.current-menu-item > a:visited,
.site-nav nav ul li.current-page_ancester > a:link,
.site-nav nav ul li.current-page_ancester > a:visited {
    background-color: black;
    color: #fff;
}