We have 2 level menu

Block1 and Block2 in the screenshot http://prntscr.com/kp2tvi are independent, Block2 is outside Block1.

Code like this:

$('.bl-1').hover(function() { var childBlock = $('[data-parent="' + $(this).data('children') + '"]'); $(this).addClass('hover'); $(childBlock).css({ 'display': 'block' }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bl-1" data-children="vanny">Ванны</div> <div class="bl-2" data-parent="vanny" style="display: none"> <ul> <li>Акриловые</li> ... </ul> </div>

Those. for a hover on .bl-1, it is assigned a class .hover and the display property of .bl-2 changes

I can not figure out how to properly close these blocks. They must be closed if the cursor leaves .bl-1 in the right / left / upward directions (see screenshot), or if the cursor leaves .bl-2.

A little confused explained, but I hope that you can understand the essence of the issue.

    1 answer 1

    The wildest govnokod, but works.

     $('.menu a').bind('mouseenter',function(){ $('.menu a.active').removeClass('active'); $('.item.active').removeClass('active'); var dataDropname = $(this).data('dropname'); var posLeft = $(this).offset().left; $('.item[data-drop="'+dataDropname+'"], .menu a[data-dropname="'+dataDropname+'"]').addClass('active'); $('.item[data-drop="'+dataDropname+'"]').css('left',posLeft); $('.item.active').bind('mouseleave',function(){ $('.menu a.active').removeClass('active'); $(this).removeClass('active'); }); }); 
     a { color: #000; text-decoration: none !important; } .nav, .drop { display: block; width: 100%; position: absolute; left: 0; top: 0; right: 0; } .menu { display: block; width: 100%; height: 50px; background: #ddd; } .menu a { display: inline-block; padding: 0 5px; height: 50px; line-height: 50px; } .menu a:hover, .item a:hover { color: red; } .menu a.active { background: #999; } .item { display: none; padding: 10px; background: #999; position: absolute; top: 50px; left: 0; } .item.active { display: inline-block; } .item a { display: block; margin-bottom: 10px; } .item a:last-child { margin-bottom: 0; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="nav"> <div class="menu"> <a href="#" data-dropname="vanny">Ванные</a> <a href="#" data-dropname="nevanny">Не ванные</a> <a href="#">Тут тоже не ванные</a> </div> <div class="item" data-drop="vanny"> <a href="#">Обычные</a> <a href="#">Такие</a> <a href="#">Сякие</a> <a href="#">Никакие</a> </div> <div class="item" data-drop="nevanny"> <a href="#">Я же</a> <a href="#">Сказал</a> <a href="#">Тут</a> <a href="#">Не ванные</a> </div> </div>

    In general, I would do so on pure CSS)

     a { text-decoration: none !important; } .menu { display: block; width: 100%; height: 50px; background: #ddd; position: absolute; left: 0; top: 0; right: 0; } .menu a:hover { color: red; } .menu .hover { display: inline-block; position: relative; } .menu .menu-item { display: inline-block; padding: 0 10px; height: 50px; line-height: 50px; color: #000; } .menu .item { display: none; padding: 10px; background: #999; position: absolute; top: 50px; z-index: 1; } .menu .hover:hover .menu-item { background: #999; } .menu .hover:hover .item { display: block; } .menu .item a { display: block; width: 100%; margin-bottom: 10px; color: #000; } .menu .item a:last-child { margin-bottom: 0; } .menu .item a:hover { color: red; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="menu"> <div class="hover"> <a class="menu-item" href="#">Ванные</a> <div class="item"> <a href="#">Обычные</a> <a href="#">Такие</a> <a href="#">Сякие</a> <a href="#">Никакие</a> </div> </div> <div class="hover"> <a class="menu-item" href="#">Не ванные</a> <div class="item"> <a href="#">Я же</a> <a href="#">Сказал</a> <a href="#">Тут</a> <a href="#">Не ванные</a> </div> </div> <a class="menu-item" href="#">Тут тоже не ванные</a> </div>