Question

I have a menu like so:

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

The current page automatically gets the class active and if it is in a ul under the main ul (submenu), then the main ul element will get the class active-parent.

So, in the above example, we would be viewing the “Subitem 2” page, so “Menu Item 1” is given the class active-parent.

I am trying to change the font color of the active-parent ONLY- not all the submenu elements. Here’s what I have:

ul.ipro_menu li.active-parent a {
color: #FF0000;
}

The problem is that this is changing not only the active-parent element, but all of the li’s in the sub-menu as well.

How do I change this to only change the font color of the specific element marked active-parent?

Answer 1

That behavior is expected with CSS. The only way to override that style for children would be to use a separate (and more specific) style for those elements:

ul.ipro_menu li.active-parent ul.sub-menu li a {
    color:#000;
}