CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Даша Новикова
Даша Новикова

Reputation: 169

The menu does not disappear

please tell me how to fix the problem with the menu.

When you hover over the PAGES item, the desired block is displayed, but it does not disappear if you move the mouse cursor away from the displayed pages block.

$(".link__mega-menu").mouseover(function() {
    $(".drop-down__mega-menu").show();
});

$(".drop-down__mega-menu").mouseleave(function() {
    $(".drop-down__mega-menu").hide();     
});

https://codepen.io/Dasha_Novikov/pen/NWPbeyw

Upvotes: 2

Views: 119

Answers (2)

Decoolipascal
Decoolipascal

Reputation: 82

The problem is that you are using different classes for adding the .show() and .hide() events. If you hover on .link__mega-menu you aren't hovering over .drop-down__mega-menu so you have to first move your cursor into the drop-down menu and then leave it again.

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Use .hover event instead of mouse event

$(".link__mega-menu, .drop-down__mega-menu").hover(function() {
      $(".drop-down__mega-menu").show();
    }, function() {
      $(".drop-down__mega-menu").hide();     
});

Upvotes: 2

Related Questions