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

Question

[Дмитрий]

Подскажите пожалуйста, как решить проблему.

Необходимо, при наведении на блок, показать другой большой блок с разделами. Как сделать, чтобы при наведении на большой блок, он не пропадал?

Пример кода на codepen
https://codepen.io/moiseev1788/pen/gOoPPRm

Comments

[Антон Антон]

Ну обычно кладут один в другой просто

[Дмитрий]

Антон Антон, так как шапка уже реализована и пункты меню прописаны в админ.панели, не совсем хочется переделывать шапку

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

Дмитрий, тогда педалить тоже джаваскрипт при наведении на большой блок чтобы он не пропадал

[Дмитрий]

Антон Литвиненко, как это сделать, можете пожалуйста подсказать?

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

Дмитрий, очень похоже на то что уже есть, только для большого блока

Answer 1

[vıtalıyırtlach]

Просто добавить селектор .drop-menu к .hover

$('.catalog-drop, .drop-menu').hover(function() { // use '.hover()', this first function handles the hover-in
    $('.drop-down').css('display', 'block'); // assign this before the animation starts

    $('.drop-down').stop().animate({ opacity: 1 }, 400); // use '.stop()' to avoid animation overlaps

}, function() { // this second function handles the hover-out
    $('.drop-down').stop().animate({ opacity: 0 }, 400, function() { // callback function for the animation
        $('.drop-down').css('display', 'none'); // assign this one when the animation is done
    });
});