Children inherit styling of "active" parent..Why???

I have a css menu with styling on the "active" class to show what page the user is currently browsing. That works fine. My problem is when i have child pages on an active page the children are also being styled the same way.

You can see this problem here

Is this a css problem or is there something i can do in wayfinder to fix it.


Thanks

Read this quickly but most likely a CSS issue....specifically, inheritance.

cheers/k

Thanks, i’l take a look

Wayfinder has two "active" classes; &selfClass is for the actual active link. &hereClass will be assigned to the active link and all of its parents up the menu structure tree.

So you can mix and match these along with explicit specifications of ul li ul li etc to style exactly what you want to style.

If you style ul li to have a red background, then all the li’s in the structure will have a red background. If you specify ul li to have a red background, then ul li ul li to have a white background, then only the first-level li will have a red background, the others will have white.

You can also use a custom chunk-tpl for the Wayfinder output and have the [+wf.classes+] in the <a> tag instead of the <li> tag. That helps eliminate unexpected cascading style effects.