It's the first time I'm trying to create a customized menu Walker. I'm following a very specific HTML. I searched and tried different things. Days have passed and I still can't get it right, but I don't want to give up.

This is the HTML I'm trying to output:

<!-- <ul class="menu"> -->

  <li class="menu-item">
    <div class="contains-submenu">
      <span class="menu-title"><a href="www.link">Item</a></span>

      <div class="submenu">
        <div class="container">

          <div class="submenu-item">
            <div style='background-image: url("www.site/icon")'></div>
            <p>Description</p>
            <a href="www.link">Item</a>
            <a href="www.link">Item</a>
          </div>

          <div class="submenu-item">
            <div style='background-image: url("www.site/icon")'></div>
            <p>Description</p>
            <a href="www.link">Item</a>
            <a href="www.link">Item</a>
            <a href="www.link">Item</a>
          </div>

          <div class="submenu-item">
            <div style='background-image: url("www.site/icon")'></div>
            <p>Description</p>
            <a href="www.link">Item</a>
          </div>

        </div>
      </div>

    </div>
  </li>

  <li class="menu-item">
    <div class="contains-submenu">
      <span class="menu-title"><a href="www.site/link">Item</a></span>

      <div class="submenu">
        <div class="container">

          <div class="submenu-item">
            <div style='background-image: url("www.site/icon")'></div>
            <p>Description</p>
            <a href="www.link">Item</a>
          </div>

          <div class="submenu-item">
            <div style='background-image: url("www.site/icon")'></div>
            <p>Description</p>
            <a href="www.link">Item</a>
          </div>

        </div>
      </div>

    </div>
  </li>

  <li class="menu-item">
    <div class="contains-submenu">
      <span class="menu-title"><a href="www.link">Item</a></span>

      <div class="submenu">
        <div class="container">

          <div class="submenu-item">
            <div style='background-image: url("www.site/icon")'></div>
            <p>Description</p>
            <a href="www.link">Item</a>
          </div>

          <div class="submenu-item">
            <div style='background-image: url("www.site/icon")'></div>
            <p>Description</p>
            <a href="www.link">Item</a>
          </div>

        </div>
      </div>

    </div>
  </li>

  <li class="menu-item">
    <div>
      <span class="menu-title"><a href="www.link">Item</a></span>
    </div>
  </li>

<!-- </ul> -->

This is my current attempt:

class Walker_Nav_Primary extends Walker_Nav_Menu {

  function start_lvl(&$output, $depth = 0, $args = array()) {
    $indent = str_repeat("\t", $depth);

    if ($depth === 0) {
      $output .= "\n$indent<div class='submenu'>\n";
      $output .= "\n$indent<div class='container'>\n";
    }

  }

  function end_lvl(&$output, $depth = 0, $args = array()) {
    $indent = str_repeat("\t", $depth);

    if ($depth === 0) {
      $output .= "\n$indent</div></div>\n";
    }
    if ($depth === 1) {
      $output .= "\n$indent</div>\n";
    }

  }

  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    $indent = ($depth) ? str_repeat("\t", $depth) : '';

    $attributes  = !empty($item->attr_title) ? ' title="'  . esc_attr($item->attr_title ) .'"' : '';
    $attributes .= !empty($item->target)     ? ' target="' . esc_attr($item->target     ) .'"' : '';
    $attributes .= !empty($item->xfn)        ? ' rel="'    . esc_attr($item->xfn        ) .'"' : '';
    $attributes .= !empty($item->url)        ? ' href="'   . esc_attr($item->url        ) .'"' : '';

    if ($depth === 0) {
      $output .= $indent . "<li class='menu-item'>\n";
      $output .= $indent . "<div class='contains-submenu'>";
      $item_output .= "<span class='menu-title'><a". $attributes .">";
      $item_output .= apply_filters("the_title", $item->title, $item->ID);
      $item_output .= "</a></span>";
    }

    if ($depth === 1) {
      $output .= $indent . "<div class='submenu-item'>\n";
      $output .= $indent . "<div style='background-image: url(\"" . $item->url . "\")></div>";
      $output .= $indent . "<p>" . $item->description ."</p>";
    }

    if ($depth === 2) {
      $item_output .= $indent . "<a". $attributes . "></a>";
    }

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }

}

The menu structure on the WordPress admin area is like this:

Item
  Subitem ---> custom link that contains link for icon and description
    Child Item
    Child Item
    Child Item
  Subitem
    Child Item
    Child Item
Item
  Subitem
    Child Item

// and so on...

The Items and Child Items are simple links for pages.
The Subitems are custom links that contains an icon url and description.
There is no Subitem empty, without at least one Child Item inside it.