$(document).ready(function () {
    $('#nav li').hover(function () {
        $(this).find('ul:first').css({ visibility: 'visible', display: 'none' }).show(400); // shows the tier when its parent is being hovered
    }, function () {
        $(this).find('ul:first').css({ visibility: 'hidden' }); // hides the tier when its parent is not being hovered
    });

    $('#nav>li>a').addClass('first-tier'); // adds the styles for the first tier on page load
    $('#nav>li>a').hover(function () {
        $(this).removeClass('first-tier').addClass('first-tier-hover'); // adds the hover for the first tier
    }, function () {
        $(this).removeClass('first-tier-hover').addClass('first-tier'); // removes the hover for the first tier
    });

    $('#nav>li>ul').hover(function () {
        $(this).parent().find('a').first().removeClass('first-tier').addClass('first-tier-hover'); // keeps the hover on the first tier if on second tier or higher
    }, function () {
        $(this).parent().find('a').first().removeClass('first-tier-hover').addClass('first-tier'); // removes the hover for the first tier
    });
});