$(document).ready(function() {
    $('li.submenu span').click(function() {
        var rel = $(this).next("ul").attr("rel");
        var color = $(this).attr("rel");

        if (rel == "closed") {
            $(this).next("ul").slideDown("slow");
            $(this).next("ul").attr("rel", "open");
            $(this).css("color", color);
            $(this).parent().css("background-image", "url(../media/images/open.gif)");
        } else {
            $(this).next("ul").slideUp("slow");
            $(this).next("ul").attr("rel", "closed");
            $(this).css("color", "#333");
            $(this).parent().css("background-image", "url(../media/images/closed.gif)");
        }
        $("li.submenu span").not($(this)).css("color", "#333");
        $("li.submenu span").not($(this)).parent().css("background-image", "url(../media/images/closed.gif)");
        $("li.submenu ul").not($(this).next("ul")).slideUp("slow");
        $("li.submenu ul").not($(this).next("ul")).attr("rel", "closed");
    });

    $('li.submenu span').hover(function() {
        var rel = $(this).next("ul").attr("rel");
        var color = $(this).attr("rel");
        if (rel == "closed") {
            $(this).css("color", color);
        }
        }, function() {
            var rel = $(this).next("ul").attr("rel");
            if (rel == "closed") {
            $(this).css("color", "#333");
        }
    });
});