title: How do you create a nested, collapsing menu with Angular Material2?
body: <p>I am looking for support within Angular Material2 for nested menus within a sidebar. The top level would typically be closed by default, and opening a top level would expose nested menu items.</p>
  
  <p>I thought this made sense as a starting point, but the child nav items render (poorly) outside of the parent items:</p>
  
  <p><a href="http://plnkr.co/edit/IHA2LfTYI0dGC6tnEMNV" rel="noreferrer">plnkr</a></p>
  
  <pre><code>&lt;md-sidenav-container class="my-container"&gt;
    &lt;md-sidenav #sidenav class="my-sidenav"&gt;
      &lt;md-list&gt;
          &lt;md-list-item&gt;
            &lt;h3 md-line&gt; First Parent &lt;/h3&gt;
            &lt;md-nav-list&gt;
              &lt;a md-list-item href="#"&gt;First Child&lt;/a&gt;
              &lt;a md-list-item href="#"&gt;Second Child&lt;/a&gt;
              &lt;a md-list-item href="#"&gt;Third Child&lt;/a&gt;
            &lt;/md-nav-list&gt;
          &lt;/md-list-item&gt;
          &lt;md-list-item&gt;
            &lt;h3 md-line&gt; Second Parent &lt;/h3&gt;
            &lt;md-nav-list&gt;
              &lt;a md-list-item href="#"&gt;First Child&lt;/a&gt;
              &lt;a md-list-item href="#"&gt;Second Child&lt;/a&gt;
            &lt;/md-nav-list&gt;
          &lt;/md-list-item&gt;
      &lt;/md-list&gt;
    &lt;/md-sidenav&gt;  
    &lt;div class="my-container"&gt;
      &lt;button md-button (click)="sidenav.open()"&gt;Open&lt;/button&gt;
    &lt;/div&gt;
  &lt;/md-sidenav-container&gt;
  </code></pre>
  
  <p>Has anyone created this kind of sidebar menu with @angular/material?</p>