There is a main menu and a drop-down menu, I made it appear when you hover and when you click (when adding a class). But there is a problem in the tablet version, the menu is not yet hidden and it’s necessary that a drop-down menu appears when clicked, but when you click back, it disappears, it is interfered by hover and therefore when you click back on it, it does not hide, it disappears only when I click on another link or just elsewhere on the screen.

I found another solution - hung up a new class and made a hover for it, at a certain screen resolution this class is removed and does not interfere with the click, but my code does not work.

if($(window).width() > 992) { $('.nav-menu__item').addClass('.nav-menu__item--hover'); } else { $('.nav-menu__item').removeClass('.nav-menu__item--hover'); } $(window).resize(function() { if($(window).width() > 992) { $('.nav-menu__item').addClass('.nav-menu__item--hover'); } else { $('.nav-menu__item').removeClass('.nav-menu__item--hover'); } }); $('.nav-menu__item').on('click', function() { $(this).toggleClass('show-dropdown'); }); 
 .dropdown-menu { position: absolute; z-index: 5; padding-top: 22px; width: 242px; left: 0; max-height:0; overflow:hidden; transform:perspective(400) rotate3d(1,0,0,-90deg); transform-origin:50% 0; transition:350ms; box-shadow: 2px 10px 15px rgba(0, 0, 0, 0.15); border-radius: 0px 0px 25px 25px; } .nav-menu { display: flex; &__item { margin: 0 15px; position: relative; &--hover:hover, &.show-dropdown { .dropdown-menu { max-height:1000px; transform:perspective(400) rotate3d(0,0,0,0); } } } 
 .nav-menu__item a.nav-menu__link(href="#") Магазины .dropdown-menu .dropdown-menu__list .dropdown-menu__item +icon('arrow-right', 'dropdown-menu__icon') a.dropdown-menu__link(href="#") Киев «MatroLuxe», ул. Беломорская, 2 .dropdown-menu__item +icon('arrow-right', 'dropdown-menu__icon') a.dropdown-menu__link(href="#") Днепр «MatroLuxe» пр. Александра Поля, 97а .dropdown-menu__item +icon('arrow-right', 'dropdown-menu__icon') a.dropdown-menu__link(href="#") Днепр «MatroLuxe» пр. Александра Поля, 96 .dropdown-menu__item +icon('arrow-right', 'dropdown-menu__icon') a.dropdown-menu__link(href="#") Днепр «MatroLuxe» пр. Александра Поля, 96

1 answer 1

Thanks, it helped, I registered hover and adding a class when clicking in media queries:

 .nav-menu { display: flex; &__item { margin: 0 15px; position: relative; @media screen and (min-width: 991px) { &--hover:hover { .dropdown-menu { max-height:1000px; transform:perspective(400) rotate3d(0,0,0,0); } } } @media screen and (max-width: 991px) { &.show-dropdown { .dropdown-menu { max-height:1000px; transform:perspective(400) rotate3d(0,0,0,0); } } } } }