Выпадающее меню
 

Есть меню

<ul id="menu_category">
 <li><span>Отдых</span>
    <ul>
     <li><a href="#">Отели</a></li>
     <li><a href="#">Клубы</a></li>
     <li><a href="#">Кафе</a></li>
    </ul>
 </li>
 <li><span>Развлечения</span>
    <ul>
     <li><a href="#">Карусели</a></li>
     <li><a href="#">Праздники</a></li>
     <li><a href="#">Блабла</a></li>
    </ul>
 </li>
</ul>

Есть скрипт

function init_menu() {
$('#menu_category ul').hide();
$('#menu_category li span').click(
 function() {
    var checkElement=$(this).next();
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) { return false; }
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu_category ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
    }
 });
}
$(document).ready(function() {init_menu();});

В итоге при клике по span'у выпадает скрытое меню. Отлично. Но как можно изменить яваскрипт. чтобы использовать несколько вложенных суб-меню, например так:

<ul id="menu_category">
    <li><span>Отдых</span>
       <ul>
          <li><span>Развлечения</span>
             <ul>
                <li><a href="#">Карусели</a></li>
                <li><a href="#">Праздники</a></li>
                <li><a href="#">Блабла</a></li>
            </ul>
         </li>
         <li><a href="#">Отели</a></li>
         <li><a href="#">Клубы</a></li>
         <li><a href="#">Кафе</a></li>
       </ul>
    </li>
</ul>

Благодарю