Подменю не остается при наведении на <a> тег

Question

Я пытаюсь спустить свое подменю вниз и оставить его открытым. Я знаю, что могу сделать это, чтобы установить наведение на теге <li>, но затем, когда я наводил на свои :: after элементы, он также открывается, чего я не хочу.

Никто не знает, как включить подменю (и суб-юг ...).

JSFiddle: http://jsfiddle.net/v9rnx7fg/

Answer 1

Это делать с вложенности - ваше событие парить на элементе якоря, когда мышь выходит из якоря граничных элементов onmouseout событие срабатывает и ваше подменю закрывается.

Вам нужно будет наложить указатель мыши на подменю parent li - тогда, когда подменю сохнет и вы переместите указатель мыши над этим, вы все равно будете парить над родительским элементом.

Надеюсь, что это имеет смысл?

EDIT: Я изменил JS для:

$(document).ready(function() { 
    $(".level2, .level3, .level4").css('display', 'none'); 
    $(".media, .groepen").hover(

    function() { 
     $('.back2').stop(true, false).slideDown('medium'); 
     $(this).closest('li').find('ul.level2').stop(true, false).slideDown('medium'); 
    }, 

    function() { 
     $('.back2').stop(true, false).slideUp('medium'); 
     $(this).closest('li').find('ul.level2').stop(true, false).slideUp('medium'); 
    }); 
    $(".mediaSub").hover(

    function() { 
     $(this).closest('li').find('ul.level3').stop(true, false).slideDown('medium'); 
    }, 

    function() { 
     $(this).closest('li').find('ul.level3').stop(true, false).slideUp('medium'); 
    }); 
    $(".2014, .2015").hover(

    function() { 
     $(this).closest('li').find('ul.level4').stop(true, false).slideDown('medium'); 
    }, 

    function() { 
     $(this).closest('li').find('ul.level4').stop(true, false).slideUp('medium'); 
    }); 
}); 

Это, кажется, работает в Chrome - браузер, что вы видите разделители вызвать меню?