Почему не могу выбрать любой пункт меню кроме первого?

Question

[incel]

Запилил менюшку, но почему-то получилось не юзабельно, невозможно выбрать пункт меню, отличный от первого - сразу перескакивает на следующее подменю.
В чем моя ошибка? В CSS?
Говнокод прикладываю
https://codepen.io/webgospodin/pen/aQjPqP

Answer 1

[Никита Ермиличев]

Когда вы наводите на второй элемент вы попадаете мышкой на следующий блок следующего раздела
Они у вас не скрыты, а просто прозрачны. Делайте им display:none, а не opacity: 0

Comments

[incel]

Заменил в CSS opacity: 0; на display:none
И теперь подменю совсем не появляются.

[Никита Ермиличев]

incel, если где-то поменяли opacity: 0; на display:none, то где-то надо поменять opacity: 1; на display:block :)

[incel]

Никита Ермиличев, подскажите, как сделать, чтобы после выбора пункта меню - само меню сворачивалось.
Пробовал через .collapse, а также убирал класс show, ставит атрибут aria-expanded = 'false' - не выходит.
Спасибо!

[Никита Ермиличев]

incel, Можно повесить на onClick закрытие меню

[incel]

Никита Ермиличев, как обработать понятно, а вот как исполнить само закрытие неизвестно

[Никита Ермиличев]

incel, можете на codepen закинуть новую версию?

[incel]

Никита Ермиличев, https://codepen.io/webgospodin/pen/aQjPqP
Обновил.
Занес страницу, которая уже после рендеринга.

[Никита Ермиличев]

incel, малой кровью не скрыть по клику (у вас на css'е сделано открытие/закрытие)

С другой стороны зачем оно Вам, если будете из меню на ссылку прыгать?)

[incel]

Никита Ермиличев, по ссылке не переходит, там выбираемое пользователем значение присваивается button'у.

[Никита Ермиличев]

incel, тогда нужно переделать последний блок на js или уйти от псевдоклассов