마우스이벤트 질문드립니다.
본문
현재 html은
<div id="pc_navi">
<ul id="top_menu">
<li><a href="/001/sub01.php"><strong>Green Pinus</strong>회사소개</a></li>
<li><a href="/001/sub01.php"><strong>Green Pinus</strong>회사소개2</a></li>
<li><a href="/001/sub01.php"><strong>Green Pinus</strong>회사소개3</a></li>
<li><a href="/001/sub01.php"><strong>Green Pinus</strong>회사소개4</a></li>
</ul>
<div id="pc_navi_s1"> <!-- 서브메뉴 -->
<ul>
<li><a href="/001/sub01.php">인사말</a></li>
<li><a href="/001/sub02.php">설립목적/연혁</a></li>
<li><a href="/001/sub03.php">비전</a></li>
<li><a href="/001/sub04.php">조직도</a></li>
<li><a href="/001/sub05.php">보유장비현황</a></li>
<li><a href="/001/sub06.php">사업실적</a></li>
<li><a href="/001/sub07.php">오시는길</a></li>
</ul>
</div>
</div>
인상태고..
$(document).ready(function(){
$("#top_menu li:first-child").hover(function(){
$("#pc_navi_s1").slideDown("fast");
},
function(){
$("#pc_navi_s1").slideUp("fast");
});
스크립트는 현재 이렇습니다..
초보라 어떤말을 써줘야할지 잘모르겠어요..ㅠㅠ
li:first-child 에 마우스를 올리고있어도 pc_navi_s1가 보이고 pc_navi_s1에 마우스를 떼면 사라진다?? 라고 써줘야할것같은데..ㅠㅠ
지금같이 쓰니까 top_menu li에 마우스를 떼면 밑에 서브메뉴같은 친구들이 사라져요 ㅜㅜ
어떻게써야 유지될수있을까요?
답변 1
보통 이런 서브메뉴를 만들 때 top 메뉴의 각 요소에 서브메뉴를 넣어주는 방식으로 사용하는 것으로 알고 있습니다.
이 코드를 수정하자면
<ul id="top_menu">
<li>
<a href="/001/sub01.php"><strong>Green Pinus</strong>회사소개</a>
<div id="pc_navi_s1"> <!-- 서브메뉴 -->
이하 생략
</div>
</li>
<li><a href="/001/sub01.php"><strong>Green Pinus</strong>회사소개2</a></li>
<li><a href="/001/sub01.php"><strong>Green Pinus</strong>회사소개3</a></li>
<li><a href="/001/sub01.php"><strong>Green Pinus</strong>회사소개4</a></li>
</ul>
이런식으로요.
!-->