js / html / css 질문
본문
html
<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>
css
/* 메뉴바 */
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;}
javascript
<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>
1차 메뉴 마우스오버시 2차메뉴 따로 만든 것 아래로 나오게 하고싶습니다 .
스크립트가 문제인건지 자꾸 올라갔다 내려갔다를 반복하고 있습니다 .
살리는셈 치고 도와주십셔
답변 1
보시면..... 두번째 이벤트가 div 태그 전체에 물려있습니다.
그런데 nav 나 모두 div 의 하위에있고요.
그러니까 어디를 누르던 슬라이드 업이 되죠...
슬라이드 업해야 할 div 에 클래스를 부여하시고.
클래스에 slide up 이벤트를 넣어주세요
답변을 작성하시기 전에 로그인 해주세요.
