$(document).ready(function() {
	/// defines menu interactions
	$("#menu ul li").mouseover(
                function () {
        // hide any previously hovered over menus
	    $("#menu ul.l2").removeClass("showMenu");
	    $("#menu ul.l2").hide();

        // show currently hovered over menu
        if (this.id != "") {
        	$("#menu ul #" + this.id + " ul.l2").addClass("showMenu");
        	$("#menu ul #" + this.id + " ul").show();
        }
     });

    $("#menu ul.l2").mouseleave(
        function() {
        $("#menu ul ul.l2").removeClass("showMenu");
        $("#menu ul ul").hide();
        }
    );

// this is a common way to escape looking at a dhtml element
$(document).click(
    function() {
    $("#menu ul ul.l1").removeClass("showMenu");
    $("#menu ul ul").hide();
    });
});