<style>
.menu a{cursor:pointer;}
.menu .hide{display:none;}
</style>


<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();
});


// menu class 중에 두번째 있는 menu 의 하위에 있는 a태그에 클릭 이벤트를 발생시킨다.
$(".menu:eq(1)>a").click();
});
</script>


<div>
<ul>
<li class="menu">
<a><img src="" alt="상위메뉴이미지1"/></a>
<ul class="hide">
<li>메뉴1-1</li>
<li>메뉴1-2</li>
<li>메뉴1-3</li>
<li>메뉴1-4</li>
<li>메뉴1-5</li>
<li>메뉴1-6</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>