jQuery: скольжение элементов меню вверх / вниз в зависимости от того, какая ссылка находится над

Question

Я хочу использовать jQuery для анимации простого вертикального меню, которое можно увидеть здесь:

http://www.cybart.com/bscg/

Когда вы наводите курсор мыши на НАШИ РЕШЕНИЯ, ПОКРЫТИЕ ИЗДЕЛИЯ, ВНЕ КОМАНДУ и КОНТАКТЫкатегории, вы увидите открытые подкатегории.Обратите внимание, что если одна из групп подкатегорий уже открыта, она закрывается, когда вы наводите указатель мыши на ссылку другой категории.

Я хочу сохранить практически те же функции, но анимировать открытие / закрытие подкатегорий.

Буду признателен, если кто-нибудь сможет научить меня, как это сделать!

Дополнительная информация:

Меню находится в <div id="access">

Вот CSS, который заставляет его работать:

#access {
position:absolute; 
left:50%;
top:140px;
margin-left:-600px;
    width: 280px;
z-index:99999;
}

#access ul {
-moz-box-shadow: 0 0 5px -1px #888;
-webkit-box-shadow: 0 0 5px -1px #888;
box-shadow: 0 0 5px -1px #888;
}

#access ul,
#access ul ul {
list-style-type:none;
width: 250px;
}

#access ul ul {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
display:none;
}

#access ul li:hover > ul {
    display: block;
}

#access ul li:last-child {
height:77px;
background: url(images/aba/ABALink.jpg) no-repeat top left;
text-indent: -3000px;
-moz-box-shadow: 0 0 5px -1px #888;
-webkit-box-shadow: 0 0 5px -1px #888;
box-shadow: 0 0 5px -1px #888;
}

#access ul li:last-child a {
background:transparent;
height:0px;
}

#access ul ul li:last-child {
background:transparent;
height:32px;
text-indent: 0px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#access ul ul li:last-child a {
background:#fff;
background: rgba(255, 255, 255, 0.85);
height:18px;
}


#access ul a,
#access ul ul a {
display:block;
padding: 7px 0 7px 10px;
background:#fff;
background: rgba(255, 255, 255, 0.85);
text-decoration:none;
color:black;

} 

#access ul ul a {
margin-left: -18px;
padding-left:20px;
width:230px;
}

#access ul a:hover,
#access ul ul a:hover {
color: #CA0000;
}

#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #CA0000;
}

Answer 1

Удалить этот CSS:

#access ul li:hover > ul {
    display: block;
}

Добавить этот JQuery:

$(function(){

    $('#access ul li').each(function(){
        $(this).children('ul').data('expanded',false); // set variable for all lists as closed
    });

    $('#access ul li').click(function(){
        if($(this).children('ul').data('expanded') === false)
        {
            $(this).children('ul').stop().slideDown();
            $(this).children('ul').data('expanded',true); // set as open
        }
        else
        {
            $(this).children('ul').stop().slideUp();
            $(this).children('ul').data('expanded',false); // set as closed
        }
    });

});