gnb에 마우스 hover했을 때, 서브메뉴 전체가 보이는데

hover 한 메뉴에 속해있는 서브메뉴만 보이도록 코드를 수정하고 싶습니다.

$(function() {
    var gnb_h = $('#gnb_1dul').height();
    var gnb_h_on = 0;
    var is_gnb_on = false;

    // GNB
    $('.gnb_1dli').each(function() { gnb_h_on = gnb_h_on > $(this).height() ? gnb_h_on : $(this).height(); });
    $('#gnb_1dul').on({
        'focusin': function() {
            is_gnb_on = true;
            $('#gnb h2').show();
            $(this).stop().css({'height': gnb_h_on});
        },
        'mouseover': function() {
            if (is_gnb_on == false) {
                is_gnb_on = true;
                $('#gnb h2').show();
                $(this).stop().clearQueue().animate({height: gnb_h_on}, 400);
            }
        },
        'focusout mouseleave': function() {
            if (is_gnb_on == true) {
                is_gnb_on = false;
                $(this).stop().clearQueue().animate({height: gnb_h}, 200, function() { $('#gnb h2').hide(); });
            }
        }
    });

제가 사용한 코드는 이거이고,

메뉴 코드는 이렇게 짜여져 있습니다.