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;
}

为此：

.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;
}

我试着用这个主题，但没用。欢迎提供任何帮助或建议

范例

HTML

---

只是试着把你的代码放进一个代码笔，它似乎工作得很好？只有hoverede菜单才有悬停灰色：它应该做什么？因为我在白色背景上看到子菜单的黑色文本。看起来不错当我在主页上悬停时，示例页面会像应该的那样弹出，但它是黑白文本的。除非它是活动页面，否则它应该是带黑色文本的白色。好吧，这有点奇怪。我将代码复制到一个普通的html页面并保存了它，它工作得很好。这让我觉得是Wordpress的问题。我将这个主题复制到一个较旧的安装中并进行了尝试，它几乎可以正常工作。下拉列表以正确的背景色显示，但由于某些原因文本为白色。我正在检查代码，看看是否可以找到设置为该值的位置，但到目前为止没有运气。

<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 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 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>

.site-nav a {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 12px;
    display: block;
    padding: 10px;
}

.site-nav ul {
    list-style-type: none;
    list-style-image: none;
    padding: 0;
}

.site-nav ul li {
    position: relative;
    width: 250px;
    background-color: white;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
}

.site-nav ul ul {
    transition: all 0.3s;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    left: 100%;
    top: -2%
}

.site-nav ul li:hover ul {
    opacity: 1;
    visibility: visible;
}

.site-nav ul li a {
    color: black;
    text-decoration: none;
}

.site-nav li:hover ul ul {
    transition: all 0.3s;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    left: 100%;
    top: -2%
}

.site-nav ul ul li:hover ul {
    opacity: 1;
    visibility: visible;
}

.site-nav ul li:hover ul ul ul {
    transition: all 0.3s;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    left: 100%;
    top: -2%
}

.site-nav ul ul ul li:hover ul {
    opacity: 1;
    visibility: visible;
}

.site-nav li:last-child {
    border-bottom: 1px solid black;
}


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

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

.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 a:hover {
    background: lightgray;
}