html - Material Design Web 1.0和mdc-menu-surface anchor 定如何？

我正在尝试使用Material Design Web 1.0，我的问题是如何正确使用mdc-menu-surface--anchor，以便菜单显示在TopAppBar下方？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>

    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>

    <script type="module">
      const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
      menu.open = false;
      document.getElementById('button1').addEventListener('click', () => menu.open = !menu.open);
    </script>
  </head>
  <body>
    <header class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-menu-surface--anchor">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <a id="button1" href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
          <span class="mdc-top-app-bar__title">Test</span>
        </section>
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        </section>
      </div>
      <div class="mdc-menu mdc-menu-surface" tabindex="-1">
        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Homepage</span></li>
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Imprint</span></li>
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Data privacy statement</span></li>
        </ul>
      </div>
    </header>

  </body>
</html>

TopAppBar看起来像这样：

html - Material Design Web 1.0和mdc-menu-surface anchor 定如何？-LMLPHP

但是当我打开汉堡菜单时，它看起来像：

我希望它会在下面打开汉堡菜单/ TopAppBar。

额外的问题：如何使它在右侧的TopAppBar下打开？

最佳答案

我不确定这是否是最好的解决方案，但目前我以以下方式解决了该问题：

<html lang="en">
  <head>
    [see above]
    <style>
      .my-top-app-bar
       {
        position: static !important;
       }
    </style>
  </head>
  <body>
    <header class="mdc-top-app-bar my-top-app-bar">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <a id="button1" href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
          <span class="mdc-top-app-bar__title">TMS Archiv</span>
        </section>
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        </section>
      </div>
    </header>
    <div class="mdc-menu-surface--anchor">
      <div class="mdc-menu mdc-menu-surface" tabindex="-1">
        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Homepage</span></li>
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Imprint</span></li>
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Data privacy statement</span></li>
        </ul>
      </div>
    </div>
  </body>
</html>

重要的是以下几件事：

.my-top-app-bar {位置：静态！important;}使mdc-top-app-bar成为页面的一部分，该页面没有覆盖所有其他元素。
标头下方的额外div将成为顶部应用栏下方菜单的锚点