$(document).ready(function () {

    // main menu functionality
    $("ul.topnav li a").hover(function () {

        //drop down and fade in the drop down menu
        $(this).parent().find("ul.subnav").slideDown('fast').fadeIn('fast', function () { $(this).height("auto"); });

        //set the z-index to a higher value, so the drop down menu is always above other elements
        $(this).parent().find("ul.subnav").css('z-index', 100);

        //set the hover function of the parent, so that when it loses mouse focus, it will fade out the drop down menu
        $(this).parent().hover(function () { }, function () { $(this).parent().find("ul.subnav").fadeOut('fast'); });
    });

});