Проблемы с элементами подменю в динамике c мегаменю

Question

У меня есть динамическое c мегаменю, которое я сделал в своей теме для американской коммерции. У меня проблема с подменю. Когда мегаменю открыто, при наведении курсора на записи подменю должно открываться раскрывающееся меню справа от записи. Этого не происходит, и я не понимаю, как это исправить. В коде меню используются «коды слияния» Americommerces, поэтому нацелить элементы подменю сложно. вот html:

 <ac:layoutarea id="Item">
            <ac:visibilityarea id="phDDLink">
              <li class="dropdown mm-dropdown">
                <a class="top-link" href="#" target="$$TARGET$$">$$TEXT$$</a>
                <ac:visibilityarea id="phSubMenu">

                  <ul class="dropdown-menu mm2">
                    $$SUBMENU$$
                  </ul>

                </ac:visibilityarea>
              </li>
            </ac:visibilityarea>
            <ac:visibilityarea id="phNoDDLink">
              <li>
                <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
              </li>
            </ac:visibilityarea>
          </ac:layoutarea>

<ac:layoutarea id="SubItem">

      <ac:visibilityarea id="phDDLink">
        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> 
          <li class="dropdown-submenu mega-submenu">
            <a class="sub-link" href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
            <ac:visibilityarea id="phSubMenu">
              <ul class="dropdown-menu mega-sub" id="">$$SUBMENU$$</ul>

            </ac:visibilityarea>
          </li>
        </div>
      </ac:visibilityarea>
      <ac:visibilityarea id="phNoDDLink">

        <li class="mega-sub-link">
          <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
        </li>    
      </ac:visibilityarea>

    </ac:layoutarea>

первая часть кода - это начальное раскрывающееся меню, и каждое подпунктное подменю (в случае моих сайтов - 2 уровня подменю) вызывает вторую часть кода. У меня проблемы с таргетингом на вторую итерацию подменю. Я могу заставить его появиться, но правильно оформить его, чтобы он не испортил остальную часть меню, не сработало. вот ссылка на сайт:

https://robotshead.americommerce.com/

вот css для меню. Ive добавил имена классов в код html, чтобы улучшить таргетинг, но он все еще работает неправильно.

/* MegaMenu */

.mm2 {
  position: relative;
  background-color: ghostwhite;
}

.dropdown.mm-dropdown {
  position: absolute;
}
/*.mm2 div > li {
min-height: 320px;
}
*/

/*.dropdown-submenu {
display: inline-block;
}
*/

.dropdown-submenu > a {   
  color: #333;
  font-size: 1.8rem;    
}

.navbar-nav .dropdown-submenu:hover > .dropdown-menu {
  display: contents;
  left: 0;
}

.navbar-nav .dropdown-submenu > .dropdown-menu {
  display: contents;  
  top: 0;
  margin: 0;  
  left: 0;
}

.mega-sub {
  box-shadow: none;
  border: none;
}


/*** sub-menu hide open/close ***/
/*.new-menu .dropdown-submenu .dropdown-menu.burt {
display: none;
}
.sub-link:hover .new-menu .dropdown-submenu .dropdown-menu.burt {
display: block;
}
.new-menu{
display: none;
}


.sub-link{
display: block;
}
*/


.mega-sub-link{
  display: none;
}

.dropdown-submenu:hover .mega-sub{
  display: block;
}

/*.dropdown-submenu:hover .new-menu{
display: block;  
}
*/
.new-menu:hover .mega-sub{
  display: block;

}

.new-menu:hover .mega-sub-link{
  display: block;
}
.new-menu:hover a{
  display: block;
}

/*** underline ***/
.dropdown-submenu > a {  
  background-image: linear-gradient(to right, black, transparent);
  background-position: 0 1em;
  background-repeat: repeat-x;
  background-size: 2px;
}   
/*** end underline ***/

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
  background-color: #e5e5e5;
}

Существует div под названием 'new-menu', и в инспекторе chrome, если вы принудительно установите состояние наведения, вы увидите лучшее раскрывающееся меню подменю, но это не то, что активно при наведении курсора при просмотре меню. Я дошел до этого, но действительно не понимаю, как правильно оформить это второе выпадающее подменю, любая помощь будет оценена!