Simples Menu Accordion com JQuery

Coisa rápida

JS

$(document).ready(function(){
 $('#accordion-container > li > a').bind('click',function() {
  var $next = $(this).next();
  if ($next.is(':visible')) return false;
  $(this).parent().parent().find('li > ul:visible').slideUp('normal');
  $next.slideDown('normal');
  return false;
});});

CSS

ul {
 margin:0;padding:0;
 list-style:none;
}
ul#accordion-container {
 width:200px;
 padding:2px;
}
ul#accordion-container > li {
 margin-top:1px;
 background:#555;
}
ul#accordion-container > li > a {
 display:block;
 padding: 4px;
 color: #fff;
 text-decoration:none;
 outline:none;
}
ul#accordion-container > li > a:hover {
 background: #000;
}ul.accordion-menu {
 display:none;
 background:#ccc;
}
ul.accordion-menu a {
 display:block;
 padding-left: 4px;
 background:#ccc;
 color:#555;
 text-decoration:none;
 outline:none;
}
ul.accordion-menu a:hover {
 color:#fff;
}

HTML

<ul id="accordion-container">
  <li>
  <a href="#">Menu 1</a>
  <ul class="accordion-menu">
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
  </ul>
  </li>
  <li>
  <a href="#">Menu 2</a>
  <ul class="accordion-menu">
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
  </ul>
  </li>
  <li>
  <a href="#">Menu 3</a>
  <ul class="accordion-menu">
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
  </ul>
  </li>
</ul>

[s]

JunioR