仅在子菜单悬停时显示子菜单的子菜单

Question

我正在尝试显示将鼠标悬停在菜单上的子菜单。我已经成功完成了子菜单1级，但是当我进入子菜单2级（即子菜单的子菜单）时，它不起作用。我只想将鼠标悬停在1级子菜单上来显示2级子菜单。以下是我尝试过的代码

<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>

我将submenu类添加到我希望它们最初被隐藏的所有元素中。然后我对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/