document.observe("dom:loaded", function() {
    document.observe("click", function(e) {
        hideSubNav();
    });
    navigationElement = $("navigation");
    navigationRoot = navigationElement.select("ul")[0];

    navigationRoot.select("li").each(function(li) {
        li.observe("mouseover", function(e) {
            hideSubNav();
            showSubNav(li);
        });
    });
});

var showSubNav = function(li) {
    if (li.select("ul").length > 0) {
        var sub = li.select("ul")[0];
        sub.setStyle({ "top": li.positionedOffset()[1] + 38 + "px", "left": li.positionedOffset()[0] + "px" });
        sub.show();
        sub.observe("mouseout", function(e) {
            hideSubNav();
        });
    }
}

var hideSubNav = function() {
    navigationRoot.select("ul").invoke("hide");
}