在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/上大型菜单的内容。