title: Angular2 Material: Md-Menu opens below router outlet
body: <p>When using md-menu with @angular/material, said menu opens below my router outlet no matter how i stack the components. What am i missing here?</p>
  
  <p><strong>app.modules.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { RouterModule, Router } from '@angular/router';
  
  import { MaterialModule } from '@angular/material';
  import { MdButtonModule } from '@angular/material';
  import { MdIconModule } from '@angular/material';
  import { AppComponent } from './app.component';
  import { ROUTES } from './app.routes';
  import { ErrorComponent } from './error.component';
  import { HomeComponent } from './home/home.component';
  import { NavComponent } from './nav/nav.component';
  import { LoginComponent } from './login/login.component';
  @NgModule({
    declarations: [
      AppComponent,
      ErrorComponent,
      HomeComponent,
      NavComponent,
      LoginComponent
      ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      MdButtonModule,
      MdIconModule,
      RouterModule.forRoot(ROUTES),
      MaterialModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>app.routes.ts</strong></p>
  
  <pre><code>import {Routes} from '@angular/router';
  import {AppComponent} from './app.component';
  import {ErrorComponent} from './error.component';
  import { HomeComponent } from './home/home.component';
  import { LoginComponent } from './login/login.component';
  export const ROUTES: Routes = [
    {path: '', component: HomeComponent },
    {path: 'login', component: LoginComponent },
    {path: '**', component: ErrorComponent}
  ];
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    template: `
    &lt;app-nav&gt;&lt;/app-nav&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `
  })
  export class AppComponent {
  }
  </code></pre>
  
  <p><strong>nav.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-nav',
    templateUrl: './nav.component.html',
    styleUrls: ['./nav.component.css'] # No styles applied.
  })
  export class NavComponent {
  }
  </code></pre>
  
  <p><strong>nav.component.html</strong></p>
  
  <pre><code>&lt;md-toolbar&gt;
      &lt;button md-icon-button [md-menu-trigger-for]="menu"&gt;
      &lt;md-icon class="dark"&gt; menu &lt;/md-icon&gt;
  &lt;/button&gt;
      &lt;md-menu #menu="mdMenu"&gt;
          &lt;button md-menu-item [routerLink]="['']"&gt;Home&lt;/button&gt;
          &lt;button md-menu-item [routerLink]="['login']"&gt;Login&lt;/button&gt;
          &lt;button md-menu-item&gt; Help &lt;/button&gt;
          &lt;button md-menu-item disabled&gt; Sign Out &lt;/button&gt;
      &lt;/md-menu&gt;
  &lt;/md-toolbar&gt;
  </code></pre>
  
  <p><strong>home.component.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html'
  })
  export class HomeComponent {
  }
  </code></pre>
  
  <p><strong>home.component.html</strong></p>
  
  <pre><code>&lt;p&gt; With a bunch of ipsum &lt;p&gt;
  </code></pre>
  
  <p>As stated above, when clicking on the menu, it opens below my block of <code>&lt;p&gt;</code> ipsum. What am i missing to have the menu open over the content? </p>
  
  <p>I am also experiencing an issue with firefox wherein clicking outside the menu does not collapse the menu back. After some digging, I understand this is most likely a bug with Material. I don't believe they are related however I also don't believe I know what I'm talking about most of the time... This is why i included it here. Thanks SO!</p>