title: Invalid HTML for md-menu: Expected the menu to contain a `md-menu-content` element
body: <p>I have the following dependencies in my project.</p>
  
  <pre><code>{
    "dependencies": {
      "angular": "^1.6.2",
      "angular-animate": "^1.6.2",
      "angular-aria": "^1.6.2",
      "angular-material": "^1.1.3",
      "angular-material-data-table": "^0.10.10",
      "angular-resource": "^1.6.2",
      "angular-route": "^1.6.2",
      "material-design-icons": "^3.0.1"
    }
  }
  </code></pre>
  
  <p>I'm using md-menu in one place and it looks like this. </p>
  
  <pre><code>&lt;div layout="column" ng-controller="sidenavCtrl"&gt;
    &lt;section layout="row" flex&gt;
      &lt;md-sidenav 
        class="md-sidenav-left"
        md-is-locked-open="$mdMedia('gt-md')"
        md-whiteframe="4"
        md-component-id="left"&gt;
  
        &lt;md-toolbar&gt;
          &lt;div class="md-toolbar-tools"&gt;
            &lt;h1&gt;CMDB&lt;/h1&gt;
            &lt;span flex&gt;&lt;/span&gt;
            &lt;md-button ng-click="close()"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/md-button&gt;
          &lt;/div&gt;
        &lt;/md-toolbar&gt;
  
        &lt;md-content layout-padding class="md-sidenav-content"&gt;
          &lt;md-button class="md-primary" hide-gt-md&gt;
            Close Sidenav Left
          &lt;/md-button&gt;
  
          &lt;md-menu&gt;
            &lt;md-menu-content&gt;
              &lt;md-menu-item&gt;
                &lt;a class="md-button" href="#!/" title="Home"&gt;Home&lt;/a&gt;
              &lt;/md-menu-item&gt;
              &lt;md-menu-item&gt;
                &lt;a class="md-button" href="#!/about" title="About"&gt;About&lt;/a&gt;
              &lt;/md-menu-item&gt;
            &lt;/md-menu-content&gt;
          &lt;/md-menu&gt;
  
        &lt;/md-content&gt;
      &lt;/md-sidenav&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I get this error at every page load.</p>
  
  <pre><code>Error: Invalid HTML for md-menu: Expected the menu to contain a `md-menu-content` element.
  n@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular-material/angular-material.min.js:16:14211
  X@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:73:417
  Na@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:176
  Na@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
  Na@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
  Na@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
  Na@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
  Na@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
  ba@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:59:87
  Mc/c/&lt;/&lt;@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:21:157
  If/this.$get&lt;/m.prototype.$eval@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:148:43
  If/this.$get&lt;/m.prototype.$apply@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:148:275
  Mc/c/&lt;@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:21:115
  h/&lt;.invoke@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:43:169
  Mc/c@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:21:36
  Mc@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:21:332
  qe@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:20:1
  @file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:331:117
  b@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:37:36
   &lt;md-menu class="md-menu"&gt;
  </code></pre>
  
  <p>And I just can't figure out why. </p>
  
  <p>I've found some other posts about md-menu but none resembling this issue. My md-menu seems to follow the proposed standard of having two child elements. It's essentially copied from the Angular Material demos but the difference is that I tried to put it inside a sidenav. Which isn't in the demos. </p>
  
  <p>It looks ok for me, and it works in so far that it's a placeholder with two items until I get time to develop it more.</p>