Highlight parent while child selected in submenu with CSS only? - html

Question

I've been racking my brains on this, and diggin into the 3rd page of google results with no avail. Here's the html and css, how can I make the parent(main menu item) stay highlighted while the submenu is selected.
Would greatly appreciate any help!
<nav class="HeaderNav">
<ul>
<li>Welcome</li>
<li>Megatrends</li>
<li>
Letters to shareholders
<ul class="test">
<li>From Rodney O’Neal</li>
<li>From Kevin P. Clark</li>
</ul>
</li>
<li>Financial highlights</li>
<li>At a glance</li>
<li>
Spotlights
<ul>
<li>Innovation</li>
<li>Collaboration</li>
<li>Excellence</li>
</ul>
</li>
<li>
Our commitments
<ul>
<li>Social responsibility</li>
<li>Leadership</li>
</ul>
and the 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 is needed for that and you have to specify your parent and child elements by giving them classes.
Then you can add a class .active in your stylesheet and style your highlight.
$('.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>Welcome
</li>
<li>Megatrends
</li>
<li class="parent"> Letters to shareholders
<ul class="test">
<li class="child">From Rodney O’Neal
</li>
<li class="child">From Kevin P. Clark
</li>
</ul>
</li>
<li>Financial highlights
</li>
<li>At a glance
</li>
<li class="parent"> Spotlights
<ul>
<li class="child">Innovation
</li>
<li class="child">Collaboration
</li>
<li class="child">Excellence
</li>
</ul>
</li>
<li> Our commitments
<ul>
<li>Social responsibility
</li>
<li>Leadership
</li>
</ul>