feat(menu): Adds new menu, menu-surface.

demos/index.html

@@ -151,6 +151,15 @@
             </span>
           </a>
 
+
+          <a href="menu-surface.html" role="listitem" class="mdc-list-item">
+            <span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_menu_24px.svg" /></span>
+            <span class="mdc-list-item__text">
+              Menu Surface
+              <span class="mdc-list-item__secondary-text">Pop over menu surfaces</span>
+            </span>
+          </a>
+
           <a href="radio.html" role="listitem" class="mdc-list-item">
             <span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_radio_button_24px.svg" /></span>
             <span class="mdc-list-item__text">

demos/menu-surface.scss

@@ -0,0 +1,86 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "./common";
+@import "../packages/mdc-button/mdc-button";
+@import "../packages/mdc-icon-button/mdc-icon-button";
+@import "../packages/mdc-list/mdc-list";
+@import "../packages/mdc-menu-surface/mdc-menu-surface";
+@import "../packages/mdc-image-list/mdc-image-list";
+
+body {
+  position: relative;
+}
+
+.hero .mdc-menu-surface {
+  position: static; // Required for proper IE11 alignment.
+  z-index: auto;
+}
+
+.demo-content {
+  position: relative;
+  top: 64px;
+}
+
+.demo-controls-container {
+  width: 100%;
+  height: calc(100vh - 80px);
+}
+
+.demo-controls {
+  width: 500px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.mdc-menu-surface--anchor {
+  position: absolute;
+  margin: 16px;
+}
+
+.margin-inputs input {
+  width: 2em;
+}
+
+.left-column-controls {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.right-column-controls {
+  display: inline-block;
+  margin-left: 2em;
+  vertical-align: top;
+}
+
+.demo-button__normal-text,
+.demo-button__long-text {
+  display: none;
+}
+
+.demo-button--normal .demo-button__normal-text,
+.demo-button--long .demo-button__normal-text,
+.demo-button--long .demo-button__long-text {
+  display: inline;
+}
+
+.standard-image-list {
+  @include mdc-image-list-aspect(1.5); // Images are 3:2
+  @include mdc-image-list-standard-columns(1);
+
+  width: 200px;
+}
+