jQuery SubMenu 机会

Question

我整晚都在努力，但无济于事。典型的 SubMenu 问题，我在这里阅读了很多类似的问题，但找不到解决方法。

我有一个无序列表的菜单。我也有一个相同的子菜单。我的菜单位置很好等问题是，当我的子菜单出现在我的常规菜单的一侧时，当我从菜单 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>

我的清单是：

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

Answer 1

将子菜单嵌套到主菜单上的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>

编辑： 这应该会给你一些想法。 - jsFiddle Demo