jQuery菜單不會在鼠標離開時隱藏

Question

我有以下菜單（僅是一個圖標，需要顯示一個下拉菜單。我可以通過切換顯示和隱藏該菜單，但是當我這樣做時，只要嘗試移動到顯示的鏈接，它就會顯示出來。關閉，如果我使用添加類在懸停菜單上觸發它，我無法使菜單消失，有人能在鼠標懸停並單擊時平滑顯示和隱藏此菜單嗎？

   <div id="global_menu">
        <span id="show_global_menu" class="icons_large">(</span>
             <ul id="dropdown" class="hidden">
                 <span class="arrow-u" style="margin-top:-8px;"></span>
                 <li> @Ajax.ActionLink("Icon Legend", "font_legend", null, new AjaxOptions {           UpdateTargetId = "placeholder_extra1", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, new { @class = "" })</li>
                <li><a href="../Home/Index" title="Sign Out">Sign Out</a></li>
                <li>Support</li>
            </ul>
</div>
    <script>
       $(document).ready(function () {
           if ($("ul#dropdown").hasClass("hidden")) {
               $("span#show_global_menu").hover(function () {
                   $("ul#dropdown").slideDown("slow");
               });
           };
       $("ul#dropdown").hover(function(){
           $("ul#dropdown").mouseout(function () {
               $("ul#dropdown").addClass("hidden");
           });
       });
      });
 </script>      

Answer 1

用它：

<script>
   $(document).ready(function () {
       if ($("ul#dropdown").hasClass("hidden")) {
           $("span#show_global_menu").hover(function () {
               $("ul#dropdown").slideDown("slow");
           });
       };

       $("ul#dropdown").mouseleave(function () {
           $("ul#dropdown").slideUp('slow');
       });
  });
</script>   

Answer 2

嘗試這樣的方法：$（document）.ready（function（）{

$("span#show_global_menu").hover(function () {
     $("ul#dropdown").slideDown("slow");
},function(){
      $("ul#dropdown").slideUp("slow");
});


      });
 </script>