jquery - 带有多个子链接的下拉导航

Question

尝试将一些效果添加到我放在一起的简单 CSS 下拉导航中。它几乎就在那里，只是在嵌套的 li 元素悬停时无法停止 fadeOut 函数调用。

我已将其放入 jsfiddle，网址为：http: //jsfiddle.net/6PmJk/

这是我正在使用的 jQuery：

$('body').removeClass('noJquery');
$('div#left_panel ul ul').css('display', 'none');
$('div#left_panel ul li').hover(function() {
    $(this).children('ul').stop().fadeIn('slow').css({
        position: 'absolute',
        left: 150,
        top: -1,
        left: 150,
        margin: 0,
        padding: 0,
        zIndex: 10
    });
}, 

function() {
    $('div#left_panel ul ul').stop().fadeOut('fast');
});

提前致谢！

Answer 1

仅将hover规则应用于“主要”ul

$('div#left_panel > ul > li').hover(function() {

http://jsfiddle.net/ExplosionPIlls/6PmJk/1/