JQuery - Hide A Div Menu After Clicking Outside Div

I've build a drop down menu at: http://www.ourbridalsongs.com/new_header/header.php When you click on the up/down arrow next to the logo - the menu appears - I'd like to make it di

Solution 1:

It's quite simple: bind a function that hides that menu to everything except that menu. To do that bind a click listener to the body element as it's everywhere, also bind a click listener to menu - the last one should just prevent from executing the first one.

$("body").click(function() {
    $("#services-container-id").hide();
});

$("#services-container-id").click(function(e) {
    e.stopPropagation();
});

Solution 2:

add this snippet in your code

$(document).click(function(e){
    var myTarget = $(".subnav");
    var clicked = e.target.className;
    if($.trim(myTarget) != '') {
        if($("." + myTarget) != clicked) {
            $("ul.subnav").slideUp('slow').hide();
        }
    }
});

this will close your ul.subnav when you click anywhere in your document.