Jquery Toggle Drop Down Menu

I'm trying to create a drop down menu where when you hover over the buttons a div will appear under it, this is my html code for the nav bar and div i want to be shown when you hover over

<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"/&开发者_如何学JAVAgt; Italiano</a>
    <a href="#lan=4">More</a>
</div>

This is my jQuery code I'm using:

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

I have managed to make it so when you hover over the button with the id lan the dropdownmenu div will appear but when the mouse moves away from the button the div drop down meny disappears, is there a way to make the drop down box stay so you can then move over the drop down menu and then when the user moves there mouse out of the drop down menu it will disappear

Try

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

DEMO

Reference

Instead of using hover, use mouseover as your function and then use mouseout and another function with what you want to happen after that. Attached the mouseout function to #ian.

check here.. http://jsfiddle.net/chin/naF4J/1/

The hover method accepts two functions, one is mouseenter, the other is mouseout.

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