카테고리 슬라이딩

<script type=text/javascript src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
jQuery(function($){
 $('h3>a').click(function(){
  $('.cate_view_all').toggleClass('cate_view_all_open');
 });
});
</script>

<style>
body, ul , h3{font-family:'돋움',;font-size:12px;padding:0;margin:0;}
img,fieldset{border:0}
ul,ol{list-style:none}

.cate_view_all{position:relative;width:605px;padding-top:3px solid #c9c9c9;border-bottom:1px solid #c9c9c9;}
.cate_view_all h3{border-right:1px solid #c9c9c9;border-left:1px solid #c9c9c9;font-size:11px;padding:0 5px;line-height:24px;}
.cate_view_all h3 a{display:block;position:relative;}
.cate_view_all .cate_list{display:none;padding-top:21px;padding-bottom:26px;border-right:1px solid #c9c9c9;border-left:1px solid #c9c9c9;border-top:1px solid #c9c9c9;}
/* .cate_view_all .cate_list{position:absolute;top:24px;left:0;display:none;padding-top:21px;padding-bottom:26px;border-right:1px solid #c9c9c9;border-left:1px solid #c9c9c9;border-top:1px solid #c9c9c9;width:100%;z-index:1000;background-color:#c9c9c9;} */
.cate_view_all_open .cate_list{display:block}
</style>

<div class="cate_view_all">
<h3>
<a href="#" jquery1640025274403836861248="1">카테고리 전체보기</a>
</h3>
<div class="cate_list">
 <ul>
  <li>컴퓨터, 통신</li>
  <li>컴퓨터, 통신</li>
  <li>컴퓨터, 통신</li>
  <li>컴퓨터, 통신</li>
  <li>컴퓨터, 통신</li>
 </ul>
</div>
</div>

<div>dddddddddddddd</div>