Javascript 如何在MaterializeCSS中创建多列下拉菜单？

我正在做一个个人项目，由于下拉菜单的元素很多，多列（准确地说是两列）会更好。如何在物化CSS中实现这一点？

这与您的想法类似吗？需要一些自定义CSS来删除一些使列表项看起来奇怪的填充，但它显示两个下拉列，并在较小的设备上捕捉到一个

HTML

---

这与您的想法类似吗？需要一些自定义CSS来删除一些使列表项看起来奇怪的填充，但它显示两个下拉列，并在较小的设备上捕捉到一个

HTML

<div id="dropdown1" class="row dropdown-content">
  <div class="col s12 m6">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div class="col s12 m6">
    <ul>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
</div>

<nav>
  <div class="nav-wrapper">
    <ul>
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown</a></li>
    </ul>
  </div>
</nav>

#dropdown1 div {
  padding: 0;
}

#dropdown1 li {
  text-align: center;
}