Jquery 菜单项悬停JavaScript第2部分

嘿，你会的，我以前有过这个问题，已经解决了，但现在我的问题回来了…复仇

我试图做的是一个由列表项组成的导航，当您将鼠标悬停在其中一个项上时，将出现另一个菜单，用户将能够将鼠标悬停在这些项上，如果用户将鼠标悬停在任一菜单列表之外，则第二个菜单将显示：无

这是我的JQuery代码

<script>
    $(".galleryNavToggle").on("mouseenter mouseleave", function(event){
    var headNavGal = $("#headerNavGallery");
    if(event.type === "mouseenter"){
      headNavGal.show();
    }else if(event.type ==="mouseleave" &&
             ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) ||
             $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){
        headNavGal.hide();
    }
});
$("#headerNavGallery").on("mouseleave", function(event){
    var headNavGal = $(this);
    if(event.type ==="mouseleave"){
        headNavGal.hide();
    }
});

</script>

如果有人能帮上忙，那就太棒了……我相信问题会出在JQuery中……我现在还在检查：）

感谢您在高级课程中的帮助

• J

---

您实际上没有提到问题是什么：）问题是，当我将鼠标悬停在最后两个菜单项上时，什么都不会发生，比如说，如果我将鼠标悬停在我希望看到的Gallery菜单项上，并且能够将鼠标悬停在HeadernavGallery上，您的代码可以正常工作，尽管我不得不用css将子菜单定位到正确的位置

<div class="headerNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="" class='galleryNavToggle'>Gallery</a></li>
<li><a href="" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->

<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="#">Categoies</a></li>
<li><a href="#">Products</a></li>
</ul>
</div><!--headerNavGallery-->




<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li><a href="#">William</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Artist Bio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--headerNavInfo-->

.headerNav{
    color:#FFF;
    padding-left:110px;
    padding-top: 18px;
    border:thin solid black;
    float:left;

}

.headerNav ul{
    list-style-type:none;
    margin:0;
    padding:0 0 0 8px;
}

.headerNav li{
    float:left;
}

.headerNav ul a{
    font-size:24px;
    color:#FFF;
    display:block;
    padding:0 55px 0 0;
    text-decoration:none;
    text-transform:capitalize;

}

.headerNav ul a:hover{
    color:#a40404;
    text-decoration:none;
}

.headerNavGallery{
    color:#000;
    padding-top:30px;
    padding-left:250px;
    float:left;
 border:thin solid black;
  margin-left:-1px;

}

.headerNavGallery ul{
    list-style-type:none;
    margin:0;
    padding:0 0 0 8px;
}

.headerNavGallery li{
    float:left;
}

.headerNavGallery ul a{
    font-size:24px;
    color:#000;
    display:block;
    padding:0 15px 0 0;
    text-decoration:none;
    text-transform:capitalize;

}

.headerNavGallery ul a:hover{
    color:#a40404;
    text-decoration:none;
}

.headerNavInfo{
    color:#000;
    padding-top:30px;
    padding-left:365px;
}

.headerNavInfo ul{
    list-style-type:none;
    margin:0;
    padding:0 0 0 8px;
}

.headerNavInfo li{
    float:left;
}

.headerNavInfo ul a{
    font-size:24px;
    color:#000;
    display:block;
    padding:0 15px 0 0;
    text-decoration:none;
    text-transform:capitalize;

}

.headerNavInfo ul a:hover{
    color:#a40404;
    text-decoration:none;
}