Javascript 离开祖父母div时触发鼠标删除

当鼠标离开祖父母div时，我的下拉菜单会触发淡出，这让我有点麻烦。我已经搜索了这个问题，但还没有找到一个完美的解决方案。这是我的密码：

演示：

您需要指定要将事件附加到的元素。通过添加“>”，您将强制仅将事件附加到该元素的子元素。试试这个：

    var main = function() {
        $('nav').mouseenter(function() {
            $(this).find('ul').fadeIn('400');
        });

        $('nav>ul>li').mouseleave(function() {
            $(this).find('ul').fadeOut('400');
        });
    };

正确为

$（'ul>li>ul'）。淡出（'400'）无法针对特定（
当前
）li

使用以下标记的分层流

var main = function() {
        $('nav').mouseenter(function() {
            $('ul li ul').fadeIn('400');
        });

        $('nav ul li').mouseleave(function() {
            $(this).find('ul').fadeOut('400');
        });
    };

清楚地解释问题。你应该解释为什么这可能会起作用，仅仅提供代码并不能教会用户什么是错误以及如何修复它。@PatrickEvans good call。在我完成编辑之前你就抓到我了。谢谢你的帮助！我发现我最初的问题（除此之外）是
容器的
位置：绝对
。container
CSS属性导致它中止：。为什么从流量更低的div进行绝对定位会导致这种情况？
$(this).find('ul').fadeOut('400'); 

var main = function() {
        $('nav').mouseenter(function() {
            $('ul li ul').fadeIn('400');
        });

        $('nav ul li').mouseleave(function() {
            $(this).find('ul').fadeOut('400');
        });
    };