Submenú jQuery como un acordeón

en la pagina weboshadi-yoga.ch Me gusta obtener un menú de navegación con una lista como esta:

<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>

Escribí un poco de jQuery para obtener un efecto de acordeón. Si hace clic en el primer nivel, la segunda lista se abrirá con un efecto de alternar:

    $(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");
        });
    });

ahora el submenú está oculto cuando abres la página. esto es correcto. hace clic en un elemento de menú y se muestra el submenú. esto es correcto. No hay enlace a una página en el primer nivel. luego haces clic en un enlace en el segundo nivel en que se abre la página, pero en el segundo nivel<ul> Se oculta durante unos segundos. este es el error

desafortunadamente no soy capaz de corregir el script jquery. ¿Puede alguien ayudarme o tiene un ejemplo de un menú que necesito?