Javascript handlerOut未在菜单样式中触发<；ul>；

我有一个

样式的菜单（下面是标记和CSS）

我应该更改脚本代码还是CSS和/或HTML中应该有更改？

您只在

的
鼠标悬停
上隐藏
鼠标悬停
，而不是
产品的
鼠标悬停
。因此，如果您的鼠标从未进入
#HoverContainer
，它将永远不会隐藏

我要做的是在
li
上定义悬停，然后在悬停时将
#HoverContainer
插入
li
（这样它就是悬停的一部分）。然后在离开
li
时，按照
#HoverContainer
的
mouseleave
上的操作，您没有包含jquery。请更新代码详细信息，先生。^^实际上我是故意把.hide（）放在.mouseLeave（）上的。我不想（这实际上是一个菜单，你看）滑上去，然后我离开井，这就是问题所在。您将离开a，因此它不会隐藏，它只会在您离开
#hovercontainer
时隐藏。我所描述的方法会在鼠标离开
a
和
#HoverContainer
时隐藏起来。我明白了，我会测试一下。^^我已经将$（“#HoverContainer”）.mouseleave（）替换为警报，它正在启动。我只需要更好地处理这个问题^^
    <ul id="TopNavigation">
        <li><a href="#" id="products" class="products">PRODUCTS</a></li>
        <li><a href="#" class="treatments">TREATMENTS</a></li>
        <li><a href="#" id="clinics" class="clinics">CLINICS</a></li>
        <li><a href="#" class="onlinereservation">ONLINE RESERVATION</a></li>
        <li><a href="#" class="contactus">CONTACT US</a></li>
    </ul>

#TopNavigation { position:relative; float:left; display:block; width:902px; height:48px; padding:0; list-style-type:none; margin:0; background:url(../images/topnav/tile-secbar.png) repeat-x; color:#999; font:normal 13px "Helvetica", sans-serif, Arial; }
#TopNavigation li { float:left; height:18px; margin-top:2px; padding:0; color:#999; font:normal 13px "Helvetica", sans-serif, Arial; display:block; }

$("#products").hover(function(){
            $("#HoverContainer").show(500, function(){
                $("#products").removeClass("products").addClass("products_active");
            });
        }, function(){
            $("#HoverContainer").mouseleave(function(){
                $("#HoverContainer").hide(500, function(){
                    $("#products").removeClass("products_active").addClass("products");
                });
            });
        });