A elusive multi level accordion

Question

Hi,
I try make a multi level accordion with jquery:

HTML

<div class="acordion">
    <a href="#"><h1>aaa</h1></a>
    <div class="acoTitulo">
        <h1>aaa</h1>
            <div class="acoSubTitulo">
                <a href="#"><h2>bbb</h2></a>
                <div class="acoSubSubTitulo">
                <h2>bbb</h2>
                    <div class="acoLink">
                        <a href="#">ccc</a><br>
                        <a href="#">ccc</a>
                    </div>
                </div>
            </div> <!-- acoSubTitulo -->
    </div> <!-- end acoTitulo -->
    <div class="acoTitulo">
        <h1>aaa</h1>
            <div class="acoSubTitulo">
                <a href="#"><h2>bbb</h2></a>
                <div class="acoSubSubTitulo">
                <h2>bbb</h2>
                    <div class="acoLink">
                        <a href="#">ccc</a><br>
                        <a href="#">ccc</a>
                    </div>
                </div>
            </div> <!-- acoSubTitulo -->
    </div> <!-- end acoTitulo -->
    <div class="acoTitulo">
        <h1>aaa</h1>
            <div class="acoSubTitulo">
                <a href="#"><h2>bbb</h2></a>
                <a href="#"><h2>bbb</h2></a>
            </div> <!-- acoSubTitulo -->
    </div> <!-- end acoTitulo -->
    <a href="#"><h1>aaa</h1></a>
    <a href="#"><h1>aaa</h1></a>
    <div class="acoTitulo">
        <h1>aaa</h1>
            <div class="acoSubTitulo">
                <a href="#"><h2>bbb</h2></a>
                <a href="#"><h2>bbb</h2></a>
            </div> <!-- acoSubTitulo -->
    </div> <!-- end acoTitulo -->
    <div class="acoTitulo">
        <h1>aaa</h1>
            <div class="acoSubTitulo">
                <a href="#"><h2>bbb</h2></a>
                <a href="#"><h2>bbb</h2></a>
            </div> <!-- acoSubTitulo -->
    </div> <!-- end acoTitulo -->
</div> <!-- end acordion -->

CSS

 .acordion h1, .acordion h2, .acoLink {
    font-size: 11px;
    padding: 8px;
 }
 .acoTitulo h2 {
    margin: 0px;
 }
 .acordion * a, .acordion a {
    text-decoration:none;
    color: #fff;
 }
 .acordion {
    width: 160px;
    color: #fff;
    background-color: #06f;
    border: 1px solid #06f;
 }
 .acoSubTitulo  {
    background-color: #09f;
 }

JS-JQUERY

 $(document).ready(function(){
        $(".acoSubTitulo").hide();
        $(".acoLink").hide();
        $(".acoTitulo").hover(
            function(){
                $(this).find(".acoSubTitulo").slideToggle("slow");
            },function(){   
                $(this).find(".acoSubTitulo").slideToggle("slow");
            }
        );
        $(".acoSubSubTitulo").hover(
            function(){
                $(this).find(".acoLink").slideToggle();
            },function(){   
                $(this).find(".acoLink").slideToggle();
            }
        );
 });

but, this accordion is very elusive with the mouse.
any idea?
many thanks.