I've got a Wordpress site where I am attempting to solve a simple problem. I've got a primary menu at the very top along with a secondary menu in the left side. The very best menu consists of level 1 products as the left menu has all of the products. For that left menu I'm while using built-in "Custom menu" widget.

To simplify the looks I must only show the products around the left that are relevant to the present area, namely products with current-menu-ancestor.

  1. Can there be any method of doing it stylishly, by producing just the needed code in HTML? Either by utilizing some custom function in functions.php (I am utilizing a Twenty Eleven child theme), or by some "Advanced Custom Menu" wordpress plugin if there's such?

  2. I'm trying to get it done in CSS, and I am almost there. I decided the products eco-friendly what I love to keep and red-colored what I must hide, however i cannot use a CSS rule to display: none the red-colored products, because it hides the eco-friendly products too.

My CSS to date is:

#secondary ul {background: red;}

#secondary li.current-menu-ancestor ul,
#secondary li.current-menu-item ul {background: green;}

This is a sample page where one can see what are red-colored products I am attempting to hide and what are eco-friendly products I am attempting to keep.


I must only have the eco-friendly products visible around the left menu.

OK, Used to do the pure CSS solution. I am still up for any Wordpress specific solution if a person can perform it:

#secondary li a {
display: none;

#secondary li.current-menu-item ul a,
#secondary li.current-menu-ancestor ul a {
display: inherit;

To cover a component via CSS, make use of the display: none; property.

For something similar to recption menus, you will want to use Javascript to alter the css from the hidden element(s) whenever a condition is met (hover/click).