Help create a hover in the mega menu, when you hover over a position, a list appears and disappears immediately, without the possibility of pointing at it. Help fix it on jquery .

Here's what I got:

$('.mega-mnu ul li').hover(function () { var mega_inner = $(this).find('ul'); mega_inner.css({'display':'block'}); }, function () { var mega_inner = $(this).find('ul'); mega_inner.css({'display':'none'}); } ); 

http://codepen.io/jSas/pen/LbavKz

  • And why on jquery? hover can be perfectly done on pure CSS. - Vadim Ovchinnikov

1 answer 1

With the function, everything is fine, you need to fix a little css:

 .mega-mnu{ width: 75%; height: 565px; margin: 0 auto; background-color: #fff; display: block; padding: 70px 30px; text-transform: uppercase; position: relative; text-decoration: none; ul{ width: 260px; position: relative; outline:2px solid green; li{ margin-bottom: 30px; position: relative; outline:2px solid green; width: 100%; display: block; &:hover{ &::before{ font-family: FontAwesome; position: absolute; top: -1px; right: -25px; font-size: 1.5em; } } a{ color: #a5a5a5; &:hover{ color: #000; } } ul{ position: absolute; top: 0; right: -530px; left:250px; display: none; outline:2px solid red; li{ } } } } } 

view code

  • Thank you very much, now I will rule. - JavAs