I currently have a menu setup like this:
<ul class="ipro_menu">
<li><a href="/">Home</a></li>
<li class="active-parent"><a href="/menu-item-1/">Menu Item 1</a>
<ul class="sub-menu">
<li><a href="/subitem-1/">Subitem 1</a></li>
<li class="active"><a href="/subitem-2/">Subitem 2</a></li>
</ul>
</li>
<li><a href="/menu-item-2/">Menu Item 2</a></li>
</ul>
When on a page, it gets the class active and if it is in a submenu under the main list (ul), then the main list element will also receive the class active-parent.
For example, if we are viewing the "Subitem 2" page in the above structure, then "Menu Item 1" should have the class active-parent.
The challenge I am facing is that I want to change the font color of the active-parent only, not all the elements in the submenu. Here's what I've tried so far:
ul.ipro_menu li.active-parent a {
color: #FF0000;
}
However, this code not only changes the font color of the active-parent element but affects all li elements in the submenu as well.
How can I modify this to only alter the font color of the specific element marked as active-parent?