What's the best way to implement a mega menu in Orchard CMS?

Question

I am looking for some help in creating a mega menu in Orchard without editing any of the CSS files or applying any new themes.

Using the "Custom Code" widget (https://orchardtricks.dotnest.com/blog/custom-code-widget-orchard-cms), I am trying to implement a mega menu that works with the existing menu hierarchy in Orchard. Below would be an example of how the HTML gets built out:

<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>

This is what I managed to get going so far https://codepen.io/Zodem/pen/pmmyqM.

I'm looking to visually reproduce something similar to the mega menu at https://www.starbucks.ca/.