html - 在 Orchard CMS 中实现大型菜单的最佳方式是什么？

Question

我正在寻找在 Orchard 中创建大型菜单的帮助，而无需编辑任何 CSS 文件或应用任何新主题。

使用“自定义代码”小部件（https://orchardtricks.dotnest.com/blog/custom-code-widget-orchard-cms），我正在尝试实现一个与 Orchard 中现有菜单层次结构配合使用的巨型菜单。下面是如何构建 HTML 的示例：

<nav>
  <ul class="menu menu-mega-menu">
    <li class="first">
      <a href="/">Home</a>
    </li>
    <li class="dropdown">
      <a href="#">Tools</a>
      <ul>
        <li class="dropdown">
          <a href="#">Microsoft Team Foundation Server</a>
          <ul>
            <li>
              <a href="#">Getting Access</a>
            </li>
            <li class="dropdown">
              <a href="#">Training Material</a>
              <ul>
                <li>
                  <a href="#">Add User Request</a>
                </li>
                <li>
                  <a href="#">Update User Request</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#">TFS Reporting</a>
          <ul>
            <li>
              <a href="#">Accessing TFS Reports</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="dropdown last">
      <a href="#">Phases</a>
      <ul>
        <li>
          <a href="#">Conception and Approval &amp; Planning</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

到目前为止，这就是我设法做到的https://codepen.io/Zodem/pen/pmmyqM。

我希望在视觉上重现类似于https://www.starbucks.ca/上的大型菜单的内容。