$(document).ready(function() {
        var hide1 = false; var hide2 = false; var hide3 = false; var hide4 = false;
        // Shows the DIV on hover with a fade in
        $("#menu1").hover(function(){         
           if (hide1) clearTimeout(hide1);
            $("#hidden-div1").fadeIn();  
            // The main nav menu item is assigned the 'active' CSS class
            $(this).addClass("active");
        }, function() {
            // Fades out the DIV and removes the 'active' class from the main nav menu item
            hide1 = setTimeout(function() {$("#hidden-div1").fadeOut("fast");});
            $("#menu1").removeClass("active");
        });
        // Ensures the DIV displays when your mouse moves away from the main nav menu item
        $("#hidden-div1").hover(function(){
            if (hide1) clearTimeout(hide1);
            $("#menu1").addClass("active");        
        }, function() {
            // If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
            hide1 = setTimeout(function() {$("#hidden-div1").fadeOut("fast");});
            $("#hidden-div1").stop().fadeIn();
            $("#menu1").removeClass("active");
        });

        $("#menu2").hover(function(){         
           if (hide2) clearTimeout(hide2);
            $("#hidden-div2").fadeIn();  
            // The main nav menu item is assigned the 'active' CSS class
            $(this).addClass("active");
        }, function() {
            // Fades out the DIV and removes the 'active' class from the main nav menu item
            hide2 = setTimeout(function() {$("#hidden-div2").fadeOut("fast");});
            $("#menu2").removeClass("active");
        });
        // Ensures the DIV displays when your mouse moves away from the main nav menu item
        $("#hidden-div2").hover(function(){
            if (hide2) clearTimeout(hide2);
            $("#menu2").addClass("active");        
        }, function() {
            // If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
            hide2 = setTimeout(function() {$("#hidden-div2").fadeOut("fast");});
            $("#hidden-div2").stop().fadeIn();
            $("#menu2").removeClass("active");
        });

        $("#menu3").hover(function(){         
           if (hide3) clearTimeout(hide3);
            $("#hidden-div3").fadeIn();  
            // The main nav menu item is assigned the 'active' CSS class
            $(this).addClass("active");
        }, function() {
            // Fades out the DIV and removes the 'active' class from the main nav menu item
            hide3 = setTimeout(function() {$("#hidden-div3").fadeOut("fast");});
            $("#menu3").removeClass("active");
        });
        // Ensures the DIV displays when your mouse moves away from the main nav menu item
        $("#hidden-div3").hover(function(){
            if (hide3) clearTimeout(hide3);
            $("#menu3").addClass("active");        
        }, function() {
            // If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
            hide3 = setTimeout(function() {$("#hidden-div3").fadeOut("fast");});
            $("#hidden-div3").stop().fadeIn();
            $("#menu3").removeClass("active");
        });

        $("#menu4").hover(function(){         
           if (hide4) clearTimeout(hide4);
            $("#hidden-div4").fadeIn();  
            // The main nav menu item is assigned the 'active' CSS class
            $(this).addClass("active");
        }, function() {
            // Fades out the DIV and removes the 'active' class from the main nav menu item
            hide4 = setTimeout(function() {$("#hidden-div4").fadeOut("fast");});
            $("#menu4").removeClass("active");
        });
        // Ensures the DIV displays when your mouse moves away from the main nav menu item
        $("#hidden-div4").hover(function(){
            if (hide4) clearTimeout(hide4);
            $("#menu4").addClass("active");        
        }, function() {
            // If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
            hide4 = setTimeout(function() {$("#hidden-div4").fadeOut("fast");});
            $("#hidden-div4").stop().fadeIn();
            $("#menu4").removeClass("active");
        });
});