Create Jquery Drop down using Divs and maintaing dual hover

What I'm trying to do is to fade in a div by rolling over a link. Once your mouse is over the link, you're able to mouse around the div that just faded in and you can click links inside the div.

Currently I have four links and each have a div with links and images in. On hover of the link the div fades in below the link then you can move your mouse over the div and use the images + links within. On roll out of the link or the div, it should fade out. Also, if you move your mouse to another main navigation link it should fade out the previous and fade in the new div.

The problem seems to be that the previous DIV will sometimes not fade out if you rapidly move to next link. I'm drawing a blank, any ideas?

Problem solved, answer is here: http://jsfiddle.net/UkneJ/3/

This is what I'm working w开发者_JAVA百科ith: http://jsfiddle.net/DemhU/17/

$('#div1, #div2, #div3, #div4').hide();

var is_over;

var hide_dropnav = function(a) {
    setTimeout(function() {
        if (is_over) {
            return;
        } else {
            var a_name = $(a).attr('data-name');

            $('#' + a_name).fadeTo(250, 0);

            $('#nav li a').removeClass('active');
        }
    }, 10);
}

$('#nav li a').hover(function() {

    var elem_name = $(this).attr('data-name');

    $('#' + elem_name).stop(true,true).fadeTo(150, 1);

    is_over = true;

    $('#nav li a').removeClass('active');
    $(this).addClass('active');

    var that = this;
    hide_dropnav(that);

}, function(){
    is_over = false;
    hide_dropnav(this);
});

$('#div1, #div2, #div3, #div4').hover(function() {
    is_over = true;
}, function() {
    is_over = false;
});

---

There are a lot of ways to do this, but I threw together a quick working example of the method I've used before:

http://jsfiddle.net/UkneJ/

In this example, I'm binding hover to both the A and the DIV, and using a slight delay to check is "is either element hovered?" state.

You can also just bind hover to the wrapping LI, which makes things much simple. This only works if both your link and your div are contained in each LI, though:

http://jsfiddle.net/UkneJ/1/

---

possible without javascript: http://jsfiddle.net/XENww/