HTML 란에 복사 붙여넣기 합니다.
<script>
// html dom 이 다 로딩된 후 실행된다.
$(document).ready(function(){
// menu 클래스 바로 하위에 있는 a 태그를 클릭했을때
$(".menu>a").click(function(){
var submenu = $(this).next("ul");
// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
if( submenu.is(":visible") ){
submenu.slideUp();
}else{
submenu.slideDown();
}
});
});
</script>
<div>
<ul>
<li class="menu">
<a>버튼이 들어갈 곳</a>
<ul class="hide">
<li>배너들이 들어가는 영역</li>
</ul>
</li>
</ul>
<style>
.menu a{cursor:pointer;}
.menu .hide{display:none;}
</style>
</div>