와 화려하네요 ^^

감사합니다.

감사합니다. 잘쓸게요.

감사합니다.~

감사합니다.
잘쓸께요~

잘쓸께요 ㅋㅋ

오타수정입니다.^^ => menu.php

1) <ul class="container">
위에 </script>태그 빠져있습니다.
화면에 아무것도 안 보이실 겁니다.

</script> <!-- 스크립트 끝태그 추가 -->
<ul class="container"> 

2) jQuery 연결하셔야 됩니다.
제 그누보드에 있는 jquery 경로입니다.

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>

3) jquery.easing.1.3.js 를 js 폴더로 옮기고 경로를 절대 경로로 바꾸었습니다.
 (그냥 제가 편하게 쓰는 스타일이라서요.)
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>

4) 이미지 경로도 절대 경로로 바꾸어 어떤 디렉토리 구조에서도
  수정없이 쓸 수 있게했습니다.
 (그냥 제가 편하게 쓰는 스타일이라서요.)

수정된 코드는 아래와 같습니다. 좋은 소스 제작해주신 코코남편님께 감사드립니다.

[menu.php]---------------------------------------------------------
<style>
body,p,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
}
a, a:visited {color:#9a4972;text-decoration:none;outline:none;letter-spacing:-1px;}

body{color:#cccccc;font-size:12px;background: #fff;font-family:dotum,'돋움';}

ul{margin:0;padding:0;}
ul.container{width:180px;padding:4px;background-color:#ffe2f1;border:1px #f1b6d4 solid;margin:50px;}

li{list-style:none;text-align:left;}
li.menu{padding:0px 0;width:100%;}
li.button a{display:block;font-family:dotum,'돋움';font-size:11px;height:23px;overflow:hidden;padding:9px 0 0 30px;position:relative;}

li.button a:hover{text-decoration:none;}
li.button a span{height:32px;position:absolute;right:0;top:0;width:4px;display:block;}


li.button a.pink{background:url(/plugin/LNB_1/img/menu_pink.gif) no-repeat top left; color:#fff;}
li.button a.pink span{ background:url/plugin/LNB_1/img/menu_pink.gif) no-repeat top right;}

li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}

.dropdown{display:none;width:100%;}
.dropdown li{color:#CCCCCC;margin:0;padding:4px 18px;}

ul.submenu {width:140px;margin-left:20px;background:#f9c8e1 url(/plugin/LNB_1/img/shadow.gif) repeat-x top;padding:5px;;}
ul.submenu li {margin:0;padding:0}
ul.submenu li a{display:block;padding:4px 0 4px 20px;font-family:돋움;font-size:11px;}
ul.submenu li a:hover{background:#fff url(/plugin/LNB_1/img/dot.gif) no-repeat 14px 9px;}

.clear{clear:both;}

</style>


<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$.easing.def = "easeOutBounce";
$('li.button a').click(function(e){
var dropDown = $(this).parent().next();
$('.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});
</script>
<ul class="container">
  <li class="menu">
  <ul>
<li class="button"><a href="#" class="pink">블루비 <span></span></a></li>
<li class="dropdown">
<ul class="submenu">
<li><a href="#">서브메뉴 1-1</a></li>
<li><a href="#">서브메뉴 1-2</a></li>
<li><a href="#">서브메뉴 1-3</a></li>
<li><a href="#">서브메뉴 1-4</a></li>
</ul>
</li>
  </ul>
  </li>

  <li class="menu">
  <ul>
<li class="button"><a href="#" class="pink">자바스크립트<span></span></a></li>
<li class="dropdown">
<ul class="submenu">
<li><a href="#">서브메뉴 2-1</a></li>
<li><a href="#">서브메뉴 2-2</a></li>
<li><a href="#">서브메뉴 2-3</a></li>
<li><a href="#">서브메뉴 2-4</a></li>
</ul>
</li>
  </ul>
  </li>
 
  <li class="menu">
  <ul>
<li class="button"><a href="#" class="pink">웹디자인<span></span></a></li>         
<li class="dropdown">
<ul class="submenu">
<li><a href="#">서브메뉴 3-1</a></li>
<li><a href="#">서브메뉴 3-2</a></li>
<li><a href="#">서브메뉴 3-3</a></li>
<li><a href="#">서브메뉴 3-4</a></li>
</ul>
</li>
  </ul>
  </li>

 
  <li class="menu">
  <ul>
<li class="button"><a href="#" class="pink">플래쉬<span></span></a></li>

<li class="dropdown">
<ul class="submenu">
<li><a href="#">서브메뉴 4-1</a></li>
<li><a href="#">서브메뉴 4-2</a></li>
<li><a href="#">서브메뉴 4-3</a></li>
<li><a href="#">서브메뉴 4-4</a></li>
</ul>
</li>

  </ul>
 
  </li>


  <li class="menu">
  <ul>
<li class="button"><a href="#" class="pink">커뮤니티<span></span></a></li>
<li class="dropdown">
<ul class="submenu">
<li><a href="#">서브메뉴 5-1</a></li>
<li><a href="#">서브메뉴 5-2</a></li>
<li><a href="#">서브메뉴 5-3</a></li>
<li><a href="#">서브메뉴 5-4</a></li>
</ul>
</li>
  </ul>
  </li>


  <li class="menu">
  <ul>
<li class="button"><a href="#" class="pink">사랑합니다.<span></span></a></li>
<li class="dropdown">
<ul class="submenu">
<li><a href="#">사랑은 미친짓</a></li>
<li><a href="#">그러게요..</a></li>
<li><a href="#">사랑은 아무나 하나</a></li>
</ul>
</li>
  </ul>
  </li>
</ul>

<div class="clear"></div>

수고하셨습니다.
감사합니다.

좋은자료 감사합니다...
클릭하지 않아도 메뉴가 펼쳐지게 하려면 어떻게 해야하는지좀 알려주세요.

코코남편님 웹군님 감사합니다~~~^^

참 좋은 자료 감사합니다.

추천!

언젠가 적용해 보고 싶지만, 제가 잘 사용하길 꺼려하는 <li> <ul> 이네요.

좋은 자료 감사합니다

감사합니다~

해당페이지에서는 해당 서브메뉴 열림으로 할려면 어떻게 하나요???
메뉴2의 서브메뉴2-2을 열었으면 해당페이지의 메뉴2가 열려있게 하고 싶습니다~~~

고수님들 방법 좀 부탁드립니다~~~~