I am trying to replicate this drop-down menu in a WordPress theme:

But I’ve spent my whole week to only get this result:

(The sections items are properly handled, but their sub-items are a mess! “Sub Item with Link 1”, “About” & “Contact”)

The html snippet of the original menu I am trying to convert into WordPress is here:

<nav class="main-nav">
  <ul id="nav" class="menu">
    <li id="menu-item" class="menu-item">
      <a href="#">Menu Main Item 1</a>
      <span class="mobile-sub-menu-opener">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="15"
          height="10"
          enable-background="new 0 0 15 10"
          viewBox="0 0 15 10"
          x="0px"
          y="0px"
          xml:space="preserve"
          version="1.1"
        >
          <g>
            <rect
              clip-rule="evenodd"
              fill-rule="evenodd"
              x="0"
              y="0"
              width="15"
              height="2"
            />
            <rect
              clip-rule="evenodd"
              fill-rule="evenodd"
              x="0"
              y="4"
              width="15"
              height="2"
            />
            <rect
              clip-rule="evenodd"
              fill-rule="evenodd"
              x="0"
              y="8"
              width="15"
              height="2"
            />
          </g>
        </svg>
      </span>
      <div class="slide">
        <ul class="col">
          <li id="menu-item" class="menu-item">
            <a>Menu Main Item 1</a>
            <ul class="sub-menu">
              <li id="menu-item" class="menu-item">
                <a href="#">Sub Item with Link 1</a>
              </li>
            </ul>
          </li>
          <li id="menu-item" class="menu-item">
            <a>Help Section</a>
            <ul class="sub-menu">
              <li id="menu-item" class="menu-item">
                <a href="#">About</a>
              </li>
              <li id="menu-item" class="menu-item">
                <a href="#">Contact</a>
              </li>
            </ul>
          </li>
          <li id="menu-item" class="menu-item">
            <a>Section 3</a>
            <ul class="sub-menu">
              <li id="menu-item" class="menu-item">
                <a href="#">Sub</a>
              </li>
              <li id="menu-item" class="menu-item">
                <a href="#">Sub</a>
              </li>
            </ul>
          </li>
          <li id="menu-item" class="menu-item">
            <a>Section 4</a>
            <ul class="sub-menu">
              <li id="menu-item" class="menu-item">
                <a href="#">Sub</a>
              </li>
              <li id="menu-item" class="menu-item">
                <a href="#">Sub</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </li>
    <li id="menu-item" class="menu-item">
      <a href="#">Menu Main Item 2</a>
      <span class="mobile-sub-menu-opener">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="15"
          height="10"
          enable-background="new 0 0 15 10"
          viewBox="0 0 15 10"
          x="0px"
          y="0px"
          xml:space="preserve"
          version="1.1"
        >
          <g>
            <rect
              clip-rule="evenodd"
              fill-rule="evenodd"
              x="0"
              y="0"
              width="15"
              height="2"
            />
            <rect
              clip-rule="evenodd"
              fill-rule="evenodd"
              x="0"
              y="4"
              width="15"
              height="2"
            />
            <rect
              clip-rule="evenodd"
              fill-rule="evenodd"
              x="0"
              y="8"
              width="15"
              height="2"
            />
          </g>
        </svg>
      </span>
      <div class="slide">
        <ul class="col">
          <li id="menu-item" class="menu-item">
            <a>Section 1</a>
            <ul class="sub-menu">
              <li id="menu-item" class="menu-item">
                <a href="#">Sub-section</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </li>
  </ul>
  <div class="mobile-show">
    <div class="nav-login">
      <a href="#" class="btn btn-register"
        >Your Account<span class="ripple-wrapper"></span
      ></a>
    </div>
    <div class="nav-login help">
      <a href="#" class="btn btn-register"
        >Help<span class="ripple-wrapper"></span>
      </a>
    </div>
  </div>
</nav>

And here’s what I’ve done so far to try to get that right, used a custom Walker_Nav_Menu:

class Child_Wrap extends Walker_Nav_Menu
{
    function start_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("t", $depth);
        $output .= "n<div class='slide'>$indent<ul class="col">n";
    }

    function end_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("t", $depth);
        $output .= "$indent</ul></div>n";
    }
}

Then wrote this to show the menu:

<nav class="main-nav">
  <!-- Menu Goes Here -->
    <?php
    wp_nav_menu( array( 
        'menu'            =>  'primary',
        'theme_location'  =>  'primary',
        'menu_id'         =>  'nav',
        'container'       =>  '',
        'after'           =>  '<span class="mobile-sub-menu-opener">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="15"
            height="10"
            enable-background="new 0 0 15 10"
            viewBox="0 0 15 10"
            x="0px"
            y="0px"
            xml:space="preserve"
            version="1.1"
        >
            <g>
            <rect
                clip-rule="evenodd"
                fill-rule="evenodd"
                x="0"
                y="0"
                width="15"
                height="2"
            />
            <rect
                clip-rule="evenodd"
                fill-rule="evenodd"
                x="0"
                y="4"
                width="15"
                height="2"
            />
            <rect
                clip-rule="evenodd"
                fill-rule="evenodd"
                x="0"
                y="8"
                width="15"
                height="2"
            />
            </g>
        </svg>
        </span>',
        'walker'                => new Child_Wrap()) ); 
    ?>
  <div class="mobile-show">
    <div class="nav-login">
      <a href="#" class="btn btn-register"
        >Your Account<span class="ripple-wrapper"></span
      ></a>
    </div>
    <div class="nav-login help">
      <a href="#" class="btn btn-register"
        >Help<span class="ripple-wrapper"></span
      ></a>
    </div>
  </div>
</nav>

How can I add the class <ul class="sub-menu"> to my sub-items and prevent the code inside of 'after' in my wp_nav_menu() from repeating itself with all other sub-items (this is what’s happening now) and make everything work as intended?