Question

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"/> 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

Answer 1

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