Przede wszystkim przepraszam za mój zły angielski, ale nie jest to mój język ojczysty, więc zrobię wszystko, co w mojej mocy, aby wyjaśnić mój problem.

Chcę utworzyć niestandardowe menu za pomocą Walker_Nav_Menu, które powinno wyglądać tak:

----------------------------------
Section 1 | Section 2 | Section 3
----------------------------------
          | SubMenu 1 |
          | SubMenu 2 |
               | Sub SubMenu 1 |
               | Sub SubMenu 2 |
          | SubMenu 3 |
          | SubMenu 4 |

Podmenu 1 i 2 w podmenu 2 powinno pojawiać się tylko po najechaniu myszką/kliknięciu łącza, a jeśli nie, to zniknie. Szukałem, a poniższy link pokazuje menu, które chcę dostosować do WordPress. Problem polega na tym, że nie mogę ustawić tagów klas na ul i li:

Próbowałem dostosować go za pomocą domyślnych klas menu WordPress, ale nie działało. Kody które posiadam:

MENU:

    <div id="menubar-menu">
<ul id="menu" class="menu"><li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-100"><a href="#">Home</a></li>
<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-103"><a href="#">Section 1</a>
<ul class="sub-menu">
    <li id="menu-item-127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127"><a href="#">Subsection 1</a></li>
    <li id="menu-item-140" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-140"><a href="#">Subsection 2</a></li>
<ul class="sub-menu">
        <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="#">SUB subsection 1</a></li>
        <li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a href="#">SUB subsection 2</a></li>
</ul>
    <li id="menu-item-141" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-141"><a href="#">Subsection 3</a></li>
</ul>
</li>
</ul></div>

<script>
$(document).ready(function () {
  $('#menu .menu-item.menu-item-has-children .trigger-sub-menu i').on('click', function () {
    $(this).toggleClass('fa-flip-vertical');
    $(this).parent().toggleClass('active');
    $('#menu .menu-item.menu-item-has-children .sub-menu').toggle();
    $('#menu .menu-item.menu-item-has-children .sub-menu .trigger-sub-menu i').removeClass('fa-flip-vertical').parent().removeClass('active');
    $('#menu .menu-item.menu-item-has-children .sub-menu').slideUp();
    return false;
  });
  $('#menu .menu-item.menu-item-has-children .sub-menu .sub-menu i').on('click', function () {
    $(this).toggleClass('fa-flip-vertical');
    $(this).parent().toggleClass('active');
    $('#menu .menu-item.menu-item-has-children .sub-menu').slideToggle(150);
    return false;
  });
});
</script>

CSS:

#menu .menu-item {
  float: left;
  margin: 10px 0 10px 5px;
}
#menu .menu-item a {
  position: relative;
  height: 30px;
  padding: 0 10px;
  border-radius: 2px;
  display: block;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
  color: #8aa4bb;
  line-height: 30px;
  white-space: nowrap;
}
#menu .menu-item a:hover, #menu .menu-item a:active {
  background: #8aa4bb;
  color: #fff;
}
#menu .menu-item a:active {
  background: #758b9f;
}
#menu .menu-item a[class*="trigger-"] {
  padding-right: 40px;
}
#menu .menu-item a i {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
#menu .menu-item a i:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 50%;
  margin: auto;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}
#menu .menu-item.menu-item-has-children {
  position: relative;
}
#menu .menu-item.menu-item-has-children .sub-menu {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 2px;
  background: #fff;
  display: none;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: translateY(35px);
          transform: translateY(35px);
}
#menu .menu-item.menu-item-has-children .sub-menu li {
  float: none;
  margin: 0;
}
#menu .menu-item.menu-item-has-children .sub-menu li a {
  border-radius: 0;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  background: #758b9f;
  display: none;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li {
  width: 100%;
  display: table;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li a {
  height: 25px;
  font-size: 8pt;
  color: #fff;
  line-height: 25px;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li:first-child a {
  margin-top: 5px;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li:last-child a {
  margin-bottom: 5px;
}

Każda pomoc zostanie doceniona! Z góry dziękuję! 🙂