jQuery UI Accordion "navigation: true" failed on nested <ul>

Question

Hello,
I am building an Accordion Menu using jQuery UI. But it appears to me that the navigation: true setter does not work for a nested <ul> tag.

navigation: true works for Header A -> Link 1, Header B -> Link 2, but not for anything in subHeader under Header B (Link 3, Link 4).

May I know if I am using an incorrect structure so that the Accordion fails to function as expteced? Thank you!

Here is the jQuery:

<script type="text/javascript">
$(document).ready(function() {
    $("#accordion").accordion({
        navigation: true,
        active: false,
        header: 'h3',
        collapsible: true
    });
});
</script>

Here is the HTML structure:

Header A

• <a href="#">Link 1</a>

Header B

• <a href="#">Link 2</a>
• subHeader A
  • <a href="#">Link 3</a>
  subHeader B
  • <a href="#">Link 4</a>

<div id="accordion">
 <h3>Header A</h3>
 <ul>
  <li><a href="#">Link 1</a></li>
 </ul>

 <h3>Header B</h3>
    <ul>
        <li><a href="#">Link 2</a></li>
        <li>
         <h4>subHeader A</h4>
                <ul>
                    <li>
                        <a href="#">Link 3</a>
                    </li>
                </ul>
         <h4>subHeader B</h4>
                <ul>
                    <li>
                        <a href="#">Link 4</a>
                    </li>
                </ul>   
            </li>
       </ul>

</div>

Answer 1

Maybe this problem / answer is what you are looking for :)
http://stackoverflow.com/questions/479270/jquery-nested-accordion-menu-problem