Как использовать события для выпадающего меню?

Question

[Посторонним В.]

Есть меню с подменю, вот структура пункта с подменю:

<div class="main-menu__item main-menu__submenu">
            <div class="main-menu__submenu__title">Вопросы и отзывы</div>
            <div class="main-menu__submenu__items">
                <div class="main-menu__submenu__item"><a class="main-menu__submenu__link" href="">Написать</a></div>
                <div class="main-menu__submenu__item"><a class="main-menu__submenu__link" href="">Часто задаваемые вопросы</a></div>
            </div>
        </div>

Выпадающий блок вынесен за пределы родительского с помощью position absolute и скрыт (display:none). Выглядит при наведении вот так:


Я повесил через jQuery для div.main-menu__submenu (родитель) на событие mousenter display: block, а на mouseleave - display: none.

$(document).ready(function() {
    $('.main-menu__submenu').mouseenter(function() {
        var target = $(this).find(".main-menu__submenu__items")[0];
        target.style.display = 'block';
);

    $('.main-menu__submenu').mouseleave(function() {
        var target = $(this).find(".main-menu__submenu__items")[0];
            target.style.display = 'none';
    });
});

Всё бы хорошо, но когда после наведения на название подменю курсор оказывается в зазоре между ним и самим подменю, срабатывает mouseover и подменю исчезает.

Что в данном случае можно прописать, чтобы это исправить? Нужно, чтобы, если курсор движется в сторону подменю, оно не пропадало.

Comments

[Дмитрий Локшин]

Если Вы используете методологию БЭМ, то это сделано в Вашем коде неправильно.

[Посторонним В.]

Дмитрий Локшин, начинаю осваивать. Что именно неправильно?

[s-jet]

Используйте для меню древовидную структуру всегда и тогда вопросов таких появляться не будет)

[Посторонним В.]

s-jet, что вы подразумеваете под древовидной структурой? И что здесь не так?

[s-jet]

Посторонним В., Древовидная это структура Родитель -> потомок. В данном меню это так

<div class="menu">Вопросы и отзывы
  <div class="menu__submenu">
     <a href="#">Написать</a>
     <a href="#">Часто задаваемые вопросы</a>
  </div>
</div>

Тогда вы просто по ховеру на родительский пункт сможете открывать потомков даже без jquery и с любыми зазорами. А у Вас сейчас совсем не верно, потому что "Вопросы и отзывы" это не заголовок меню по архитектуре, это родительский пункт

[s-jet]

Посторонним В., как-то так https://jsfiddle.net/6xxvdhwp/

Answer 1

[Negwereth]

Например сделать контейнер, вплотную прилегающий к родительскому пункту меню, а зазоры уже внутри него делать?

И да, для этого жиквери нафиг не нужен, достаточно CSS правила с :hover по родителю и как там уже к подменю обращение идёт, через + или >