js / html / css 질문 채택완료

</p>

<p><div class="ml_nav"></p>

<p><div class="main_logo"></p>

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

<p></div></p>

<p> </p>

<p><nav></p>

<p><div class="gnb"></p>

<p><ul class="gnb_1ch_menu"></p>

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

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

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

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

<p><li>커뮤니티</li></p>

<p></ul></p>

<p></div></p>

<p></nav></p>

<p></div></p>

<p></header></p>

<p><!-- ================== Sub_Gnb ================== --></p>

<p><div class="sub"></p>

<p> </p>

<p><div class="sub_gnb"></p>

<p><div class="sub_gnb_box"></p>

<p><ul></p>

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

<p><li>- 인사말</li></p>

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

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

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

<p></ul></p>

<p><ul></p>

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

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

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

<p></ul></p>

<p><ul></p>

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

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

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

<p></ul></p>

<p><ul></p>

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

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

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

<p></ul></p>

<p><ul></p>

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

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

<p><li>- Q & A</li></p>

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

<p><li>- 자료실</li></p>

<p></ul></p>

<p></div></p>

<p></div></p>

<p></div></p>

<p>

 </p>

<p>/* 메뉴바 */</p>

<p>nav{width: 990px; float: left; height: 100px;overflow: hidden;}</p>

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

<p>.gnb_1ch_menu{overflow: hidden; padding: 35px 35px; height: 100px;display: block;}</p>

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

<p>.gnb_1ch_menu .g_1ch_m{margin-right: 20px;}</p>

<p>.gnb::after{content: "";display: block; clear: both;}</p>

<p> </p>

<p>/* 서브메뉴바 */</p>

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

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

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

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

<p>.bold_gnb{font-size: 1.125em; font-weight: bold;}</p>

<p>.sub_gnb::after{content: "" ; display: block; clear: both;}</p>

<p>

</p>

<p><script></p>

<p>$(document).on('mouseover', '.gnb_1ch_menu', function(){</p>

<p>$('.sub_gnb').slideDown(300);</p>

<p>})</p>

<p>$(document).on('mouseover' ,'div' , function(){</p>

<p>if(! ($(this).hasClass('.gnb_1ch_menu')) || ($(this).hasClass('.sub_gnb'))) {</p>

<p>$('.sub_gnb').slideUp(300);</p>

<p>}</p>

<p>});</p>

<p></script></p>

<p> </p>

<p>