마우스를 올리면 사라지기
본문
현재 <a> 태그를 마우스오버하면 메뉴가 나왔다 다시한번 마우스오버하면 사라지는데
이것을 마우스 오버하면 메뉴가 나오고 바로 마우스가 움직여 메뉴까지 포함해서 마우스오버가 되지 않을때 사라지게 하는 방법을 알고 싶습니다
어디를 수정해야 할까요?
<script>
// html dom 이 다 로딩된 후 실행된다.
$(document).ready(function(){
// menu 클래스 바로 하위에 있는 a 태그를 마우스오버 할때
$(".menu>a").mouseover(function(){
var submenu = $(this).next("ul");
// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
if( submenu.is(":visible") ){
submenu.slideUp();
}else{
submenu.slideDown();
}
});
});
</script>
답변 2
div ul li ul { display:none; }
div ul li:hover ul { display:block; }
위 형태로 css 작성하시면 마우스 올렸을때 메뉴나오고 벗어나면 사라집니다.
<div>
<ul>
<li>1차메뉴
<ul>
<li>2차메뉴</li>
</ul>
</li>
</ul>
</div>