菜单：在悬停切换从顶部的div滑块

Question

我正在制作一个滑动下拉菜单，在悬停.account-nav-show时打开。我已经完成了向下滑动功能，但当您从.account-nav-show中移除箭头时，它不会滑回。另外，我试图做的是让它保持打开状态，直到您将箭头放到实际的＃account-nav中。有任何想法吗？

此外，.account-nav-show所在的div具有：悬停，因此当您悬停.account-nav-show时它会更改颜色。是否有可能将它保持在：将箭头向下滑动到＃account-nav中时悬停？

 <script type="text/javascript"> 

$(document).ready(function(){ 

     $("#account-nav").hide(); 
     $(".account-nav-show").show(); 

    $('.account-nav-show').hover(function(){ 
    $("#account-nav").slideDown(400); 
    }); 

}); 

</script> 
<a class="account-nav-show">Account</a> 
<div id="account-nav"> 
<a href="/account">Account</a><br> 
{{ 'Log out' | customer_logout_link }} 
</div> 

Answer 1

后悬停结合补充一点：

$('.account-nav-show').on('mouseleave', function(){ 
    $("#account-nav").slideUp(400); 
}); 

以下是你需要的最终代码：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#account-nav").hide(); 
     $(".account-nav-show").show(); 

     $('.account').hover(function(){ 
      $("#account-nav").slideDown(400); 
     }); 

     $('.account').on('mouseleave', function(){ 
      $("#account-nav").slideUp(400); 
     }); 
    }); 
</script> 

<div class="account"> 
    <a href="#" class="account-nav-show">Account</a> 
    <div id="account-nav"> 
     <a href="/account">Account</a><br> 
     {{ 'Log out' | customer_logout_link }} 
    </div> 
</div> 

还有的jsfiddle例如：http://jsfiddle.net/odorcxeu/