Как сделать выпадающий блок при наведении?

Question

[gogi_avsadzhanishvili]

Здравствуйте, столкнулся с проблемой. Долго мучаюсь, никак не получается создать выпадающий блок. Видел много вариантов выпадающих списков, но все же не подходит. Самому написать хороший код не представляется возможным (мало опыта js). Делаю на jquery, но альтернативные варианты на js приветсвуются.

$(document).ready(function(){
  $('#genre').hover(function () {
     clearTimeout($.data(this,'timer'));
     $('.drop-menu, #genre').stop(true,true).slideDown(300);
  }, function () {
    $.data(this,'timer', setTimeout($.proxy(function() {
      $('.drop-menu').stop(true,true).slideUp(300);
    }, this), 100));
  });
});

здесь drop-menu не вложен в #genre. (#genre - ссылка), #drop-menu - обычный блок.

изьян данного кода в том, что при наведении на блок, он все равно сворачивается

Comments

[Антон Литвиненко]

Вы бы оформили в песочницу, вместе с разметкой и стилями

[gogi_avsadzhanishvili]

Антон Литвиненко, не додумался
https://codepen.io/pen/?template=VwKZBVL

[Антон Литвиненко]

gogi_avsadzhanishvili, У вас плохая труктура разметки. Очевидно, что когда вы убираете ховер с элемента у вас пропадает меню. Вот пример разметки классического меню с подменю

<ul class="main-menu">
  <li class="menu-item-has-children">
    <a href="#1">Укрдіпродор</a>
    <ul class="sub-menu">
      <li><a href="#1">Пункт меню</a></li>
      <li><a href="#1">Пункт меню 2</a></li>
      <li><a href="#1">Пункт меню 3</a></li>
    </ul>
  </li>
  <li> <a href="#1">Протидія корупціі</a></li>
</ul>

Идея в том что событие ховера тут вешается не на ссылку а на li, у которого потомком является выпадающее меню.
И пока курсор наведен на li, ссылку и на выпадающее меню считается что он наведен на li

[gogi_avsadzhanishvili]

Антон Литвиненко, понял, спасибо за Ваш ответ и внимание. Может можете подсказать литературу, чтобы подтянуть верстку, стоит ли верстать по бэм

Answer 1

[Lukmann]

а обязательно при наведении?

Comments

[gogi_avsadzhanishvili]

Ну да, обычно по наведению делают