서브메뉴가 안펼쳐지고 스크롤이생겨요

html부분입니다.

<div class="HeaderBar">

<div class="HeaderLayout">

<ul id="gnb">

<span>소속시설</span> <div class="sub">

<span>소개</span>
<span>종합재가센터</span>
<span>국공립어린이집</span>

<span>다함께돌봄센터</span>
<span>공공센터</span>

</div>

<span>사업소개</span> <div class="sub">

<span>소개</span>

<span>복지정책연구</span>

<span>복지네트워크 지원</span>
<span>사회서비스기관 지원</span>
<span>사회서비스종사자 지원</span>

<span>민관협력 네트워크 지원</span>

<span>주민참여형 돌봄사업(복지만두레) 지원</span>

<span>품질관리 지원</span>

</div>

<span>복지자료</span> <div class="sub">

<span>복지자료</span>

</div>

<span>알림마당</span> <div class="sub">

<span>공지사항</span>

<span>보도자료</span>

<span>체용/입찰공고</span>

<span>재단소식</span>

<span>갤러리</span>

<span>재단이모저모</span>

<span>시정홍보</span>

</div>

<span>재딘소개</span> <div class="sub">

<span>인사말</span>

<span>미션·비전</span>

<span>연혁</span>

<span>조직도</span>

<span>오시는길</span>

<span>CI 소개</span>

<span>입주단체</span>

</div>

<span>열린경영</span> <div class="sub">

<span>정보공개</span>

<span>경영정보</span>

<span>정관 및 제규정</span>

<span>예산집행</span>

<span>대외평가</span>

<span>윤리인권경영</span>

<span>고객서비스 헌장</span>

</div>

</div> </div>

<div class="subM_Bg"></div>

css부분입니다

HeaderBar #gnb > li > a {
height: 3rem;
display: block;
line-height: 3rem;
text-align: center;
font-size: 1.15rem;
font-family: 'kbiz';
color: #333;
position: relative;
font-weight: 400;
}
.HeaderBar #gnb > li > a.on {
color: #ff8519;
}
.HeaderBar #gnb > li > a.on:before {
content: '';
display: block;
width: 1.1rem;
height: 0.5rem;
background: url(../imgs/nav_before.png) no-repeat center center/cover;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.HeaderBar #gnb .sub {
display: none;
position: absolute;
top: 3rem;
left: 0;
width: 100%;
z-index: 2;
}
.HeaderBar #gnb > li > div > ul {
padding: 0.5rem 0;
display: inline-block;
height: 100%;
overflow: hidden;
}
.HeaderBar #gnb > li > div > ul > li {
float: left;
margin-right: 0.75rem;
}
.HeaderBar #gnb > li > div > ul > li > a {
display: block;
padding: 0.3rem 0.75rem 0.3rem 0;
font-size: 0.85rem;
color: #fff;
position: relative;
}

.HeaderBar #gnb > li > div > ul > li > a:before {
content: '';
width: 1px;
height: 0.6rem;
background: #a4d8d7;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}

제이쿼리입니다


$(document).ready(function () {
$('#gnb li').hover(
function () {
$('#gnb li a').removeClass('on');

$(this).find('a').addClass('on');

var subMenuHeight = $(this).find('.sub').outerHeight();
$('.subM_Bg').css('height', subMenuHeight + 'px');

$('.sub').hide();
$(this).find('.sub').show();
 },
function () {
$(this).find('.sub').hide();

$(this).find('a').removeClass('on');
 }
 );
 });


이렇게만들고싶었는데


제가만든메뉴는 저렇게  마우스를 올려도 화면에 서브메뉴가 안보이고



이부분에 스크롤이생겨지는데 아무리 다시짜도 저렇게 되서 지피티한테도 물어봤는데 답을 못찾아서 질문합니다

$(document).ready(function(){
 
function gnb() { //네비게이션
var parent = $("#gnb");
var dep1 = parent.find(">li>a");
var sub = parent.find(">li>.sub");
var bg = $(".subM_Bg");
var last = parent.find(">li:last .sub ul li:last a");
bg.css({height: 0, display: "none"});

dep1.on("mouseover focusin", function () {
var t = $(this);
var menuH = t.next().outerHeight();

if (t.next().length){
//if(t.next().is(":hidden")){
dep1.removeClass("on");
sub.stop().hide();
t.addClass("on");
t.next().stop().show();
bg.show().stop().css({height: menuH});
//}
 } else {
gnbHide();
 }
 });

last.on("focusout", function () {
gnbHide();
 });

parent.on("mouseleave", function () {
gnbHide();
 });

function gnbHide() {
dep1.removeClass("on");
sub.stop().hide();
if (bg.is(":hidden")) {
bg.hide();
 } else {
bg.stop().css({height: 0}, function () {
bg.hide();
 });
 }
 }
 }

gnb();

});

이건 제가 클론한 사이트 제이쿼리인데 이렇게해도 마우스를 올리면 화면에 안보이고 스크롤만됩니다...