js / html / css 질문 채택완료

<div class="ml_nav">

<div class="main_logo">

<a href="index.html"><img src="./img/logo_small.png" alt="메인로고"></a>

</div>

 

<nav>

<div class="gnb">

<ul class="gnb_1ch_menu">

<li class="g_1ch_m">소개</li>

<li class="g_1ch_m">공간예약</li>

<li class="g_1ch_m">프로그램예약</li>

<li class="g_1ch_m">오픈강의실</li>

<li>커뮤니티</li>

</ul>

</div>

</nav>

</div>

</header>

<!-- ================== Sub_Gnb ================== -->

<div class="sub">

 

<div class="sub_gnb">

<div class="sub_gnb_box">

<ul>

<li><span class="bold_gnb">청년창업랩</span></li>

<li>- 인사말</li>

<li>- 지원안내</li>

<li>- 입주기업</li>

<li>- 오시는 길</li>

</ul>

<ul>

<li><span class="bold_gnb">공간 예약</span></li>

<li>- 공간 소개</li>

<li>- 공간 예약</li>

</ul>

<ul>

<li><span class="bold_gnb">프로그램 예약</span></li>

<li>- 프로그램 소개</li>

<li>- 프로그램 예약</li>

</ul>

<ul>

<li><span class="bold_gnb">오픈강의실</span></li>

<li>- 강의 소개</li>

<li>- 강의 보기</li>

</ul>

<ul>

<li><span class="bold_gnb">커뮤니티</span></li>

<li>- 공지사항</li>

<li>- Q & A</li>

<li>- 포토갤러리</li>

<li>- 자료실</li>

</ul>

</div>

</div>

</div>

/* 메뉴바 */

nav{width: 990px; float: left; height: 100px;overflow: hidden;}

.gnb{overflow: hidden; height: 100px;font-size: 1.125em;}

.gnb_1ch_menu{overflow: hidden; padding: 35px 35px; height: 100px;display: block;}

.gnb_1ch_menu > li{height: 50px; float: left;padding: 0px 50px;}

.gnb_1ch_menu .g_1ch_m{margin-right: 20px;}

.gnb::after{content: "";display: block; clear: both;}

 

/* 서브메뉴바 */

.sub_gnb{overflow: hidden; width: 100%; height: 350px; background: rgba(27, 27, 27, 0.6); z-index: 9999; position:absolute; display: none;}

.sub_gnb_box{width: 2000px;margin: 0 auto; overflow: hidden; height: 350px; padding: 30px 0 0 550px;}

.sub_gnb_box > ul{float: left; width: 13%; margin-right: 30px; height: 300px; border-left: 1px solid #fff;}

.sub_gnb_box > ul > li{font-size: 1.07em;color: #fff; margin-bottom: 25px; height: 40px; text-align: center;}

.bold_gnb{font-size: 1.125em; font-weight: bold;}

.sub_gnb::after{content: "" ; display: block; clear: both;}

<script>

$(document).on('mouseover', '.gnb_1ch_menu', function(){

$('.sub_gnb').slideDown(300);

})

$(document).on('mouseover' ,'div' , function(){

if(! ($(this).hasClass('.gnb_1ch_menu')) || ($(this).hasClass('.sub_gnb'))) {

$('.sub_gnb').slideUp(300);

}

});

</script>