Как скрыть полное меню за исключением элементов с предком current-menu-предка в WP

Question

У меня есть сайт Wordpress, где я пытаюсь решить очень простую проблему. У меня есть главное меню вверху и дополнительное меню слева. В верхнем меню содержатся элементы уровня 1, а в левом - все элементы. Для левого меню я использую встроенный «Пользовательское меню» виджет.

Чтобы упростить внешний вид, я хотел бы показывать только элементы слева, относящиеся к текущей области, а именно элементы с current-menu-ancestor.

1. Есть ли способ сделать это элегантно, генерируя только необходимый код в HTML? Либо с помощью какой-то пользовательской функции в functions.php (я использую дочернюю тему Twenty Eleven), либо с помощью какого-нибудь «Расширенного пользовательского меню» , если есть такой?

2. Я пытаюсь сделать это в CSS, и я почти у цели. Я выбрал элементы зеленого цвета, который я хотел бы сохранить, и красного цвета, который я хотел бы скрыть, но я не могу применить правило CSS к display: none красным элементам, потому что тогда оно также скрывает зеленые элементы.

Мой CSS пока такой:

#secondary ul {background: red;}

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

Вот пример страницы, где вы можете увидеть, какие красные элементы я пытаюсь скрыть, а какие - зеленые элементы, которые я пытаюсь сохранить.

http://kozossegikertek.hu/csatlakozz/

Мне бы хотелось, чтобы в левом меню отображались только зеленые элементы.

Answer 1

ОК, я сделал чистое решение CSS.Я все еще готов для конкретного решения WP, если кто-то может сделать это:

#secondary li a {
display: none;
}

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

Answer 2

Чтобы скрыть элемент с помощью CSS, используйте свойство display: none;.

Для чего-то похожего на меню, вы захотите использовать Javascript, чтобы изменить CSS скрытого элемента (ов) при выполнении условия (наведение / нажатие).