$(document).ready(function(){
    $("li.ddmhover").mouseover(function() {
        var that = this,
        subnav = $(this).find("ul.subnav"),
        img = $(this).find('img'),
        subnavTimeout;

        $(this).addClass("subhover");
        subnav.slideDown('fast');

        var hideSubnav = function (evt) {
            // Wait half a second before trying to hide subnav
            subnavTimeout = setTimeout( function () {
                $(subnav).unbind('mouseleave');
                $(subnav).slideUp('slow');
                $(that).removeClass("subhover");
            }, 500);
        };

        $(subnav).mouseleave(hideSubnav)
        // since the title image fills the whole .ddmhover li we must attach to the image itself
        $(img).mouseleave(hideSubnav);

        // If the mouse entered the subnav don't close the subnav
        $(subnav).mouseenter(function () {
            clearTimeout(subnavTimeout);
        });
    });
});