material-design-lite - Material Design Lite 导航

Question

如何在导航中创建子菜单项？

<!-- Navigation -->
  <nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
  </nav>

我不能用 <ul> <li>用它。什么是正确的类？

Answer 1

MDL 似乎还没有原生支持子菜单。
然而有一些菜单类可以用作子菜单:

http://www.getmdl.io/components/index.html#menus-section

所以在你的代码中你可能是这样的:

<!-- Left aligned menu below button -->
<nav class="mdl-navigation">
  <a id="submenu" class="mdl-navigation__link" href="#">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
</nav>

<!-- sub menu only visible when clicked on the link above -->
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
    for="submenu">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>

确保在您的 href 中包含 #。