Using jquery dropdown menu

[devand]

hi Guys,

need some help with this menu, it’s working 100% as it should, but I need to customize it a bit.

When clicking on a sub-menu-item the normal action is to close that sub menu, I want it to stay open as I want to show a picture in a div element, different picture for each sub menu link.

I know its something basic, but java-script is not my strong point. so try to imagine 4-6 links on the left ( in the sub menu ) then one picture on the right, once you click a nav link in the sub menu, the pic changes BUT the sub menu with nav links stay open, I only want the sub menu to close if the user clicks on the outside of the menu ( maybe link it to the body ).

the code :

jQuery(window).load(function() {

    $("#nav > li > a").click(function (e) { // binding onclick
        if ($(this).parent().hasClass('selected')) {
            $("#nav .selected div div").slideUp(300); // hiding popups
            $("#nav .selected").removeClass("selected");
        } else {
            $("#nav .selected div div").slideUp(300); // hiding popups
            $("#nav .selected").removeClass("selected");

            if ($(this).next(".subs").length) {
                $(this).parent().addClass("selected"); // display popup
                $(this).next(".subs").children().slideDown(300);
            }
        }
        e.stopPropagation();
    }); 

    $("body").click(function () { // binding onclick to body
        $("#nav .selected div div").slideUp(300); // hiding popups
        $("#nav .selected").removeClass("selected");
    }); 

any help would be appreciated.

[wilsonusman]

@devand

jQuery(window).load(function() {

$("#nav > li > a").click(function (e) { // binding onclick
    if ($(this).parent().hasClass('selected')) {
        $("#nav .selected div div").slideUp(300); // hiding popups
        $("#nav .selected").removeClass("selected");
    } else {
        $("#nav .selected div div").slideUp(300); // hiding popups
        $("#nav .selected").removeClass("selected");

        if ($(this).next(".subs").length) {
            $(this).parent().addClass("selected"); // display popup
            $(this).next(".subs").children().slideDown(300);
        }
    }
    e.stopPropagation();
}); 

$("body").click(function () { // binding onclick to body
    $("#nav .selected div div").slideUp(300); // hiding popups
    $("#nav .selected").removeClass("selected");
});

Can you provide the HTML and CSS?