Показывать подменю только в подменю

Question

Я пытаюсь показать подменю при наведении меню. Я преуспел в уровне подменю 1. Но когда я перехожу на уровень подменю 2(то есть, подменю подменю), он не работает. Я хочу показывать подменю уровня 2 только при наведении на подменю уровня 1. Ниже приведен код, который я пробовал

<ul class="nav">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About Us</a>
        <ul class="submenu">
            <li><a href="#">Capabilities</a></li>
            <li><a href="#">Approach</a></li>
        </ul>
    </li>

    <li><a href="#">Careers</a>
        <ul class="submenu">
            <li><a href="#">Working With Us</a></li>
            <li><a href="#">Work Culture</a>
                <ul>
                    <li><a href="#">Benefits</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Resources</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
</ul>

Ниже приводится JQuery

$('ul.submenu').hide();
$('ul.nav > li').hover(function () {
if ($(this).find('ul.submenu').length > 0) {
    $(this).find('ul.submenu').stop().slideDown('slow');
}
},function () {
    if ($(this).find('ul.submenu').length > 0) {
        $(this).find('ul.submenu').stop().slideUp('slow');
    }
});

Пожалуйста, найдите скрипку здесь: http://jsfiddle.net/Midhun28/RbY83/1/

Answer 1

Насколько я понял, вы хотите передвинуть подменю при наведении пункта списка на один уровень выше

<ul class="submenu">
    <li><a href="#">Working With Us</a></li>
    <li><a href="#">Work Culture</a>
        <ul class="submenu">
            <li><a href="#">Benefits</a></li>
        </ul>
    </li>
</ul>

я добавил класс подменю ко всем элементам, которые я хочу, чтобы они были изначально скрыты. Затем я сделал некоторые изменения в коде jquery для работы со всеми подменю

$('ul.submenu').hide();
$('ul.nav > li, ul.submenu > li').hover(function () {
if ($('> ul.submenu',this).length > 0) {
    $('> ul.submenu',this).stop().slideDown('slow');
}
},function () {
    if ($('> ul.submenu',this).length > 0) {
        $('> ul.submenu',this).stop().slideUp('slow');
    }
});

надеюсь, что это сработает для вас, см. http://jsfiddle.net/U7mqM/

Answer 2

Используйте события mouseenter и mouseleave, если вы хотите, чтобы они запускались при наведении курсора на подэлементы.

$('.nav ul').hide();

$('.nav li').mouseenter(function() {
    $(this).children('ul').stop().slideDown('slow')
}).mouseleave(function() {
    $(this).children('ul').stop().slideUp('slow')
});

Answer 3

jQuery(function(){
            topNav = jQuery('ul.topnav > li > a');
            if(jQuery(topNav).hasClass('hover')){
                        return
            }
            jQuery(topNav).hover(function(){
                    jQuery(this).addClass('hover');
                    jQuery(this).next('.subnav').slideToggle('', function(){                        
                        jQuery(topNav).removeClass('hover');
                });
            });
        });