마우스이벤트 질문드립니다. 채택완료

현재 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에 마우스를 떼면 밑에 서브메뉴같은 친구들이 사라져요 ㅜㅜ

어떻게써야 유지될수있을까요?