Как поправить меню?

Question

[Yana N]

Есть меню с выпадающими подпунктами (типы стендов, портфолио), открываются по клику. Проблема в том, что когда открыт первый элемент с подпунктами, то на второй уже не переключиться по ховеру (только если меню скрыть и заново открыть на нужном пункте).
https://jsfiddle.net/9f2v6850/2/

понимаю что это из-за display:block и один элемент перекрывает другой, но поправить и сделать нормально не получается

или может изначально надо было делать по-другому?

Answer 1

[iljaGolubev]

открываются по клику...
и
... на второй уже не переключиться по ховеру

какое-то противоречие у вас.
В вашем примере после клика отображается меню второго уровня и hover на других пунктах меню работает как положено - подсвечивает, а при клике показывает свой второй уровень. (Chrome)
Если вы хотите, чтобы после клика на любом пункте меню другие отображались при наведении - добавьте соответсвующий js $('.menu-bot.OPENED').hover(function(){trigger(click)... (псевдокод)

Comments

[Yana N]

а при клике показывает свой второй уровень. (Chrome)

показывает только в первый раз
потом только после закрытия меню по клику показывает второй уровень

это надо дописывать после того как к меню добавляется класс .height?

[iljaGolubev]

Yana N, я не понимаю что вы хотите сделать.
Включите консоль разработчика и посмотрите что происходит в элементами при click/mouseleave. Все показанные подменю так и остаются показанными.
Вы должны восстанавливать состояние пунктов меню после клика на другом или выхода мышки из меню. Как минимум так:

$(".menu-bot .menu-bot__item").click(function() {
    $(".menu-bot__submenu").hide();
     ...
    });

[iljaGolubev]

Yana N, или может изначально надо было делать по-другому...
посмотрите как в bootstrap, например, делается.
https://www.w3schools.com/bootstrap/tryit.asp?file...