Javascript-форум - Выпадающее меню (нужна помощь с JS)

Добрый день, уважаемые пользователи!
Возник вопрос с выпадающим вертикальным меню, код вызова:

Код:

<script type="text/javascript">

        $(function() {

        

            var menu_ul = $('.menu-left-menu-container .menu > li > ul'),

                menu_a  = $('.menu-left-menu-container .menu > li > a');

            

            menu_ul.hide();

        

            menu_a.hover(function(e) {

                e.preventDefault();

                if(!$(this).hasClass('active')) {

                    menu_a.removeClass('active');

                    menu_ul.filter(':visible').slideUp('normal');

                    $(this).addClass('active').next().stop(true,true).slideDown('normal');

                } else {

                    $(this).removeClass('active');

                    $(this).next().stop(true,true).slideUp('normal');

                }

            });

        

        });

</script>

Проблема собственно вот в чем. Данный код работает при событии HOVER на первый пункт меню LI, но если я к примеру навожу на другие подпункты этого же меню, то они просто обратно сворачиваются.
Как сделать так, чтобы при наведении на первый LI меню раскрывалось и можно было без труда перейти по вложенным пунктам, а вот если я отвожу мышку от этого пункта, подменю просто сворачивалось.

Для примера покажу картинки.