Sencillo menú en acordeón con jquery

Hoy voy a hacer un manual de como podemos crear muy fácilmente un menú en acordeón con jQuery.

Primero de todo tendremos que crear una lista con html con diferentes puntos de menús y submenús.

<ul>
<li>Menu 1<ul><li>submenu1</li><li>Submenu1</li></ul></li>
<li>Menu 2<ul><li>submenu1</li><li>Submenu2</li></ul></li>
<li>Menu 3<ul><li>submenu1</li><li>Submenu3</li></ul></li>
</ul> 

Le damos un sencillo toque con css:
li
{
    background:black;
    padding:5px;
    width:100px;
    color:white;
    border:1px solid white;
    cursor:pointer;
}
li ul
{
    display:none;
}
li ul li
{
    width:100px;
    border:0px;
    padding:0px;
}
y por último colocamos el siguiente código de jQuery en nuestro document ready:

$(document).ready(function() {

$('ul li').click(function() {
    if($(this).children().css("display")=='none'){
          $('li').children().slideUp();
          $(this).children().slideToggle();
}
});

  });

Podemos ver como funciona en el siguiente enlace:
http://jsfiddle.net/hSVsh/