Need first and second tier menus and hovers to remain upon click of third tier

I found some awesome code for a three tier menu system and would like to make a few changes, but can't understand how to get it done.

Do anyone have any thoughts on my hope to change the code so that when a user clicks on a third tier menu option (em), the second (i) and first tier (b) menus will remain with there hover states. Currently, when a user clicks on a third tier option, the second tier disappears and the first tier hover is removed. I am thinking that I need a .click function f开发者_如何学JAVAor the third tier elements, but I'm just not that sure. My jquery is in the developing stages :)

My .js file is as follows:

$(document).ready(function(){

    closetimer = 0;

    $("#navMenu b").mouseover(function() {
    clearTimeout(closetimer);
        if ($(this).hasClass('hover')) {
            $("#navMenu ul ul ul:visible").slideUp(500);
            $("#navMenu em").removeClass("hover");
            $("#navMenu ul ul:visible").slideUp(500);
            $("#navMenu i").removeClass("hover");
            $(this).parent().next().fadeOut("slow");
            $(this).removeClass("hover");
        }
        else {
            $("#navMenu b").removeClass();
            $(this).addClass("hover");
            $("#navMenu ul ul ul:visible").slideUp(500);
            $("#navMenu em").removeClass("hover");
            $("#navMenu ul ul:visible").slideUp(500);
            $("#navMenu i").removeClass("hover");
            $("#navMenu ul:visible").fadeOut("slow");
            $(this).parent().next().fadeIn("slow");
        }
        return false;
    });

    $("#navMenu i").mouseover(function() {
    clearTimeout(closetimer);
        if ($(this).hasClass('hover')) {
            $("#navMenu ul ul ul:visible").slideUp(500);
            $("#navMenu em").removeClass("hover");
            $(this).parent().next().slideUp(500);
            $(this).removeClass("hover");
        }
        else {
            $("#navMenu i").removeClass();
            $(this).addClass("hover");
            $("#navMenu ul ul ul:visible").slideUp(500);
            $("#navMenu em").removeClass("hover");
            $("#navMenu ul ul:visible").slideUp(500);
            $(this).parent().next().slideDown(500);
        }
        return false;
    });

    $("#navMenu em").mouseover(function() {
    clearTimeout(closetimer);
        if ($(this).hasClass('hover')) {
            $(this).parent().next().fadeOut("slow");
            $(this).removeClass("hover");
        }
        else {
            $("#navMenu em").removeClass();
            $(this).addClass("hover");
            $("#navMenu ul ul ul:visible").fadeOut("slow");
            $(this).parent().next().fadeIn("slow");
        }
        return false;
    });

    $("#navMenu").mouseover(function() {
    clearTimeout(closetimer);
    });

    $("#navMenu").mouseout(function() {
        closetimer = window.setTimeout(function(){
        $("#navMenu ul ul ul:visible").fadeOut("slow");
        $("#navMenu em").removeClass("hover");
        //$("#navMenu ul ul:visible").slideUp(500);
        //$("#navMenu i").removeClass("hover");
        }, 2000);
    }); 

    $("#navMenu em").click(function() {
        $("#navMenu ul ul ul:visible").fadeOut("slow");
        $(this).parent().next().fadeIn("slow");
        $(this).parent().addClass("hover");
    });

}); //end DOM

Had trouble posting my html. Let me know if you need it.

Thank you to anyone who can head me in the right direction. I so want to learn what I can't seem to figure out!

Removing the line I have specified will stop the second tier disappearing when you hover over the third tier.

$("#navMenu em").mouseover(function() {
clearTimeout(closetimer);
    if ($(this).hasClass('hover')) {
        $(this).parent().next().fadeOut("slow");    <-- REMOVE THIS
        $(this).removeClass("hover");
    }
    else {
        $("#navMenu em").removeClass();
        $(this).addClass("hover");
        $("#navMenu ul ul ul:visible").fadeOut("slow");
        $(this).parent().next().fadeIn("slow");
    }
    return false;
});

Also, you might be able to get the hover class to stay on the top tier by adding this:

$(this).parent().parent().next().addClass("hover");

But I really can't ensure it will work without seeing the HTML.