submenu jQuery como um acordeão

na página da weboshadi-yoga.ch Eu gosto de obter um menu de navegação com uma lista como esta:

<code><ul>
    <li class="section-title">Yoga
        <ul style="display: none;">
            <li><a href="/">Approach</a></li>
            <li><a href="/">Asanas</a></li>
            <li><a href="/">Yoga</a></li>
            <li><a href="/">Kirtan</a></li>
        </ul>
    </li>
</ul>
</code>

Eu escrevi um pouco de jquery para obter um efeito de acordeão. se você clicar no primeiro nível, a segunda lista será aberta com um efeito de alternância:

<code>    $(function() {
        $("#lbar li.section-title ul").hide();
        $("#lbar li.section-title").click(function() {
            $(this).find("ul").toggle();
        });
    });

    $(function() {
        $("#lbar li.section-titleact ul").show();
        $("#lbar li.section-titleact").click(function() {
            $(this).find("ul").toggle();
        });
    });

    $(function() {
        $("#lbar li.section-titleact ul li a").click(function() {
            $("#lbar li.section-titleact ul").css("display", "block");
        });
    });
</code>

Agora o submenu fica oculto quando você abre a página. isto está certo. você clica em um item de menu e o submenu é mostrado. isto está certo. não há link para uma página no primeiro nível. então você clica em um link no segundo nível em que a página é aberta, mas o segundo nível<ul> fica oculto por alguns segundos. esse é o erro.

infelizmente eu não sou capaz de corrigir o script jquery. alguém pode me ajudar ou tem um exemplo de um menu que eu preciso?

questionAnswers(1)

yourAnswerToTheQuestion