jQuery子菜单opportunity

我整晚都在做这件事，但毫无结果。典型的子菜单问题，我在这里读了很多类似的问题，但找不到解决办法

我有一份菜单，是无序的。我还有一个子菜单也是一样的。我的菜单定位得很好，等等。问题是，当我的子菜单出现在我的常规菜单的一侧时，只要我从悬停菜单1转到菜单2，它就会消失。我相信这很简单，但有人能看一下吗

<script>
$(document).ready(function() {
$('.nav').hover(function(e) {
    if(!$('.nav2').is(':visible'))
    {
        $('.nav2').fadeIn('slow');
    }
},function(){
    if(!$('.nav2').is(':hover'))
    {
        $('.nav2').fadeOut('slow');
    }
});

$('.nav2').mouseout(function(){
    if(!$('.nav').is(':hover'))
    {
        $('.nav2').fadeOut('slow');
    }
});
});
</script>

$（文档）.ready（函数（）{
$（'.nav'）.hover（函数（e）{
如果（！$（'.nav2'）。是（':visible'））
{
$（'.nav2'）.fadeIn（'slow'）；
}
}，函数（）{
如果（！$（'.nav2'）。是（':hover'））
{
$（'.nav2'）.fadeOut（'slow'）；
}
});
$（'.nav2'）.mouseout（函数（）{
如果（！$（'.nav'）。是（':hover'））
{
$（'.nav2'）.fadeOut（'slow'）；
}
});
});

我的名单是：

<div id="col1">

<ul class="nav">
<li><a href="http://www.alan.com">Home</a></li>
<li><a href="http://www.alan.com">About</a></li>
<li><a href="http://www.alan.com">New Listings</a></li>
<li><a href="http://www.alan.com">Featured Home</a></li>
<li><a href="http://www.alan.com">Town Facts</a></li>
<li><a href="http://www.alan.com">Contact Me</a></li>
</ul>

<ul class="nav2">
  <li><a href="http://www.alan.com">Bio</a></li>
  <li><a href="http://www.alan.com">Credentials</a></li>
  <li><a href="http://www.alan.com">Education</a></li>
  </ul>

</div>

将子菜单嵌套到主菜单上的

li

中。比如：

<div id="col1">
    <ul class="nav">
        <li><a href="http://www.alan.com">Home</a></li>
        <li><a href="http://www.alan.com">About</a>
            <ul class="nav2">
                <li><a href="http://www.alan.com">Bio</a></li>
                <li><a href="http://www.alan.com">Credentials</a></li>
                <li><a href="http://www.alan.com">Education</a></li>
            </ul>
        </li>
        <li><a href="http://www.alan.com">New Listings</a></li>
        <li><a href="http://www.alan.com">Featured Home</a></li>
        <li><a href="http://www.alan.com">Town Facts</a></li>
        <li><a href="http://www.alan.com">Contact Me</a></li>
    </ul>
</div>

编辑：

---

这会给你一些想法

将子菜单嵌套到主菜单上的

li

。比如：

<div id="col1">
    <ul class="nav">
        <li><a href="http://www.alan.com">Home</a></li>
        <li><a href="http://www.alan.com">About</a>
            <ul class="nav2">
                <li><a href="http://www.alan.com">Bio</a></li>
                <li><a href="http://www.alan.com">Credentials</a></li>
                <li><a href="http://www.alan.com">Education</a></li>
            </ul>
        </li>
        <li><a href="http://www.alan.com">New Listings</a></li>
        <li><a href="http://www.alan.com">Featured Home</a></li>
        <li><a href="http://www.alan.com">Town Facts</a></li>
        <li><a href="http://www.alan.com">Contact Me</a></li>
    </ul>
</div>

编辑：

---

这会给你一些想法

很好，但还有最后一个问题。。。。当我移动到子菜单，然后继续关闭子菜单时，子菜单永远不会消失，除非我移回主菜单，然后关闭主菜单。是什么原因造成的？@RobertMailloux：在一个jsfiddle演示中对答案进行了编辑。希望有帮助。（我无法修复主菜单的其他部分滑到那里）太棒了！！你的代码比我想做的要简单得多。都是因为嵌套列表！非常感谢。很好，但还有最后一个问题。。。。当我移动到子菜单，然后继续关闭子菜单时，子菜单永远不会消失，除非我移回主菜单，然后关闭主菜单。是什么原因造成的？@RobertMailloux：在一个jsfiddle演示中对答案进行了编辑。希望有帮助。（我无法修复主菜单的其他部分滑到那里）太棒了！！你的代码比我想做的要简单得多。都是因为嵌套列表！非常感谢。