Good day. I try to draw a menu, when I hover over a div another div (submenu) falls out.

 $(document).ready(function() { $('.nav__cli').hover(function() { $('.nav__sub_cli').show(); }); $('.nav__cli').mouseleave(function() { $('.nav__sub_cli').hide(); }); });

By itself, when the cursor leaves the menu item, the submenu disappears. The menu is horizontal, that is, if we move the cursor to the next item or up, the submenu should disappear, and if we switch to it, it is natural to stay and disappear if the cursor goes to the side from the submenu block. How can this be realized?

  • to put nav__sub_cli into nav__cli - Artem Gorlachev

1 answer 1

In my opinion, ideally, do so that the menu item and submenu were inside a single element, on which to hang in the css: hover https://jsfiddle.net/skywave/3kqovnaf/1/

HTML:

 <div class="parent"> <a href="#" class="menu-item">Пункт меню с выпадалкой</a> <div class="undermenu"> <a href="#" class="undermenu-item">Подпункт 1</a> <a href="#" class="undermenu-item">Подпункт 2</a> <a href="#" class="undermenu-item">Подпункт 3</a> </div> </div>

CSS:

 .undermenu { display: none; } .parent:hover .undermenu { display: block; }

But if there is no such possibility, then it’s just like yours, only with the mouseleave you need to make a slight delay before closing the httmen://jsfiddle.net/skywave/f5wh52qy/1/

 $(document).ready(function(){ var timeout; $(document).on('mouseover', '.menu-item, .undermenu', function(){ clearTimeout(timeout); // при наведении чистим timeout, чтобы не закрылся $('.undermenu').addClass('show'); }); $(document).on('mouseleave', '.menu-item, .undermenu', function(){ timeout = setTimeout(function(){ $('.undermenu').removeClass('show'); }, 500); }); });