jquery 이용한 메뉴 질문드립니당.

<script>    $(document).ready(function(){        $(".menu>a").click(function(){            var submenu = $(this).next("ul");             // submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기            if( submenu.is(":visible") ){                submenu.slideUp();            }else{                submenu.slideDown();            }        }).mouseover(function(){            $(this).next("ul").slideDown();        });    });</script> <div>    <ul>        <li class="menu">            <a><img src="" alt="상위메뉴이미지1"/></a>            <ul class="">                <li>사무용책상(일자형)</li>                <li>퍼즐형책상(ㄱ자형)</li>				<li>중역용책상</li>				<li>중역용책상(실속형)</li>				<li>임원용책상</li>				<li>유리/가죽디자인책상</li>				<li>교육/학원/세미나책상</li>				<li>컴퓨터책상</li>				<li>이동서랍</li>				<li>책상보조테이블</li>				<li>가정용책상</li>				<li>실험실/기숙사</li>            </ul>        </li>         <li class="menu">            <a><img src="" alt="상위메뉴이미지2"/></a>            <ul class="hide">                <li>메뉴2-1</li>                <li>메뉴2-2</li>                <li>메뉴2-3</li>                <li>메뉴2-4</li>                <li>메뉴2-5</li>                <li>메뉴2-6</li>            </ul>        </li>    </ul></div>