html - 仅使用 CSS 在子菜单中选择子项时突出显示父项？

Question

我一直在为此绞尽脑汁，并在谷歌搜索结果的第 3 页挖掘无济于事。这是 html 和 css，如何在选择子菜单时使父项(主菜单项)保持突出显示。 非常感谢任何帮助!

<nav class="HeaderNav">
        <ul>
            <li><a href="#firstPage/1">Welcome</a></li>
            <li><a href="#firstPage/2">Megatrends</a></li>
            <li>
                <a href="#">Letters to shareholders</a>
                <ul class="test">
                    <li><a href="#firstPage/3">From Rodney O’Neal</a></li>
                    <li><a href="#firstPage/4">From Kevin P. Clark</a></li>
                </ul>
            </li>
            <li><a href="#firstPage/5">Financial highlights</a></li>
            <li><a href="#firstPage/6">At a glance</a></li>
            <li>
                <a href="#">Spotlights</a>
                <ul>
                    <li><a href="#firstPage/7">Innovation</a></li>
                    <li><a href="#firstPage/8">Collaboration</a></li>
                    <li><a href="#firstPage/9">Excellence</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Our commitments</a>
                <ul>
                    <li><a href="#firstPage/10">Social responsibility</a></li>
                    <li><a href="#firstPage/11">Leadership</a></li>
                </ul>

和CSS:

<style>
nav ul li a:link { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#d7d7d7; text-decoration:none; padding:12px 12px 8px;}
nav ul li a:visited { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#d7d7d7; text-decoration:none; background-color:#000000; padding:12px 12px 8px;}
nav ul li a:hover { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#00aeef; text-decoration:none;  background-color:#000000; padding:12px 12px 8px;}
nav ul li a:active { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#00aeef; text-decoration:none; background-color:#000000; padding:12px 12px 8px;}
nav ul li a:focus { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#00aeef; text-decoration:none; background-color:#000000; padding:12px 12px 8px;}

nav ul ul {
    display:none;
    background: #000000; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
    text-align:left;
}

nav ul ul li {
    float: none; 
    border-bottom: 1px solid #939393;
    position: relative;
    padding:5px 0;
}

nav ul ul li a {
    padding: 5px 20px;
}   

nav ul ul li a:hover { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#00aeef; text-decoration:none; background-color:#000000; padding:5px 12px;}

nav ul li:hover > ul {
    display: block;
    }
</style>

Answer 1

为此需要 jQuery，您必须通过给它们类来指定父元素和子元素。

然后您可以在样式表中添加一个类 .active 并设置突出显示的样式。

$('.child').click(function () {
    $('li.active').removeClass('active');
    $(this).closest('.parent').addClass('active');
});

nav ul li a:link {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#d7d7d7;
    text-decoration:none;
    padding:12px 12px 8px;
}
nav ul li a:visited {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#d7d7d7;
    text-decoration:none;
    background-color:#000000;
    padding:12px 12px 8px;
}
nav ul li a:hover {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#00aeef;
    text-decoration:none;
    background-color:#000000;
    padding:12px 12px 8px;
}
nav ul li a:active {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#00aeef;
    text-decoration:none;
    background-color:#000000;
    padding:12px 12px 8px;
}
nav ul li a:focus {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#00aeef;
    text-decoration:none;
    background-color:#000000;
    padding:12px 12px 8px;
}
nav ul li {
    display: inline-block;
    width: 100px;
}
nav ul ul {
    display:block;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100px;
    text-align:left;
}
nav ul ul li {
    float: none;
    border-bottom: 1px solid #939393;
    position: relative;
    padding:5px 0;
    display: block;
}
nav ul ul li a {
    padding: 5px 20px;
}
nav ul ul li a:hover {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#00aeef;
    text-decoration:none;
    background-color:#000000;
    padding:5px 12px;
}
nav ul li:hover > ul {
    display: block;
}
.active {
    background: red;
    color: white;
}

<nav class="HeaderNav">
    <ul>
        <li><a href="#firstPage/1">Welcome</a>

        </li>
        <li><a href="#firstPage/2">Megatrends</a>

        </li>
        <li class="parent"> <a href="#">Letters to shareholders</a>

            <ul class="test">
                <li class="child"><a href="#firstPage/3">From Rodney O’Neal</a>

                </li>
                <li class="child"><a href="#firstPage/4">From Kevin P. Clark</a>

                </li>
            </ul>
        </li>
        <li><a href="#firstPage/5">Financial highlights</a>

        </li>
        <li><a href="#firstPage/6">At a glance</a>

        </li>
        <li class="parent"> <a href="#">Spotlights</a>

            <ul>
                <li class="child"><a href="#firstPage/7">Innovation</a>

                </li>
                <li class="child"><a href="#firstPage/8">Collaboration</a>

                </li>
                <li class="child"><a href="#firstPage/9">Excellence</a>

                </li>
            </ul>
        </li>
        <li> <a href="#">Our commitments</a>

            <ul>
                <li><a href="#firstPage/10">Social responsibility</a>

                </li>
                <li><a href="#firstPage/11">Leadership</a>

                </li>
            </ul>