Need help adding sub-menu options to a working example of single level
<p>I've been following this tutorial to make a responsive menu <a href="http://filamentgroup.com/lab/responsive_design_approach_for_navigation/" rel="nofollow">http://filamentgroup.com/lab/responsive_design_approach_for_navigation/</a> and the demo from that site can be viewed at <a href="http://filamentgroup.com/examples/rwd-nav-patterns/" rel="nofollow">http://filamentgroup.com/examples/rwd-nav-patterns/</a>.</p>

<p>What I can't manage to do is to add an additional expand option on the sub-menu items. Here is a sample navigation structure which mimics a real world site. I can get the single level expand to work on the mobile view (small screen devices) but when I attempt to nest another list within the top list it doesn't expand. I've spent quite a while on this and just can't work out where I need to adjust the code to work on a multilevel navigation.</p>

<pre><code>    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Menu One&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Menu Two&lt;/span&gt;&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Level Two&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Level Two&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Level Two&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Level Two&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Level Three&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Level Three&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Level Three&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Level Three&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
      &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Menu Three&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Menu Four&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Menu Five&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Menu Six&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Menu Seven&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Menu Eight&lt;/span&gt;&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Level Two&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Level Two&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Level Two&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Level Two&lt;/a&gt;


                &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Level Three&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Level Three&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Level Three&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Level Three&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;

                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
</code></pre>

<p>Can anyone provide a solution?</p>

<p>Happy to give as much info as needed.</p>
