Question

我早些时候问过一个类似的问题，但已经解决了，但无法解决这个问题。这是一个不同的主题，侧面有垂直菜单。当我将鼠标悬停在菜单上时，所有子菜单的颜色都与父菜单相同。

在最后一个问题中，我不得不更改它：

.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

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

CSS

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

垂直菜单下拉颜色

0 个答案: