Jquery 切换下拉菜单

Question

我正在尝试创建一个下拉菜单，当您将鼠标悬停在按钮上时，其下方会出现一个 div，这是我的导航栏和 div 的 html 代码，当您将鼠标悬停在

<ul class="buttonleft"> 
    <li id="lan"><a href="#language"><img id="topflag" src="images/flags/gb.png" alt="GB"/> English <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#search">Search and Book <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#offers">Latest Offers <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#offers">Car Hire <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#offers">Contact Us <img src="images/arrow.png" alt="Arrow" /></a></li> 
</ul>         

<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="#lan=1"><img id="topflag" src="images/flags/es.png" alt="ES"/> Español</a>
    <a href="#lan=2"><img id="topflag" src="images/flags/de.png" alt="DE"/> Deutsch</a>
    <a href="#lan=3"><img id="topflag" src="images/flags/fr.png" alt="FR"/> Français</a>
    <a href="#lan=4"><img id="topflag" src="images/flags/it.png" alt="IT"/> Italiano</a>
    <a href="#lan=4">More</a>
</div>

这是我的 jQuery 代码上时，我希望显示该代码正在使用：

$(document).ready(function(){
    $("#lan").hover(function(){
        $("#dropmenu2").fadeToggle("fast");
        $(this).toggleClass("active");
    });
});

我已经设法做到了，所以当你将鼠标悬停在带有 id lan 的按钮上时，下拉菜单 div 将会出现，但是当鼠标移开按钮时，div 下拉菜单会消失，有没有办法让下拉菜单向下框停留，以便您可以在下拉菜单上移动，然后当用户将鼠标移出下拉菜单时，它将消失

Answer 1

尝试

$(document).ready(function(){
   $("#lan>a").bind({    
    mouseout : function(){
      $("#dropmenu2").fadeOut("fast");
      $(this).removeClass("active");
    },
    mouseenter: function() {
        $("#dropmenu2").fadeIn("fast");
        $(this).addClass("active");
    }
})

DEMO

参考

Answer 2

不要使用悬停，而是使用 mouseover 作为你的函数，然后使用 mouseout 和另一个函数来实现你想要发生的事情。将 mouseout 功能附加到 #ian。

Answer 3

检查这里.. http://jsfiddle.net/chin/naF4J/1/

Answer 4

hover 方法接受两个函数，一个是 mouseenter，另一个是 mouseout。

$("#lan").hover(function() {
    //this is mouseenter
}, function() {
    //this is mouseout
});