$(document).ready(function() {
    $('#menu_list li').mouseover(function() {
        ResizeSubNavHeight(this);
        $(this).children('.sub_nav_holder').stop().fadeTo(300, 1).show(); //Fade to 1 opactiy
    }).mouseout(function() {
        $(this).children('.sub_nav_holder').stop().fadeTo(300, 0, function() { //Fade to 0 opactiy
            $(this).hide();  //after fading, hide it (clean)
        });
    });








    //resize surrounding div - return rows of list * height of each row (manually)
    //will only return TOTAL number of rows in list in sub nav NOT individually
    function ResizeSubNavHeight(item) {
        var ULs = $('.sub_nav_holder .sub_nav_item .sub_nav_list', item);
        var TotalSize = 0;
        var ListSize = 0;
        var ListItemHeight = 30;

        $(ULs).each(function() {
            ListSize = $('li', this).size();
            ListItemHeight = $('li', this).outerHeight();
            if (ListSize > TotalSize) {
                TotalSize = ListSize;
            }
        });

        if (TotalSize != 0) {
            $('.sub_nav_item', item).css('height', parseInt(TotalSize * ListItemHeight + 40));
        }
    }
});