Создание слайд-меню с Freemarker, HTML, CSS и Javascript

Question

Я создаю меню, которое скользит по горизонтали с помощью freemarker, HTML, CSS и Javascript.Проблема в том, что когда я меняю положение своего элемента «LI», я не знаю, как получить высоту главного меню и перенести его на элемент поверх него.

Для лучшего объяснения, меню должно скользить горизонтально, когда я нажимаю, и я уже сделал эту функцию, но когда оно скользит, меню, которое находится ниже, остается на той же высоте, прежде чем изменить положение LI.

Я добавляюизображения тоже: https://imgur.com/a/wqaiciB

Как вы можете видеть на изображениях, я хочу, чтобы граница, которая находится в главном меню, оставалась в остальной части меню, но это меню dinamyc, и я нене знаю, как это сделать.

Может ли кто-нибудь помочь мне, пожалуйста?

Вот мой код:

 function ariaTrue(e){
      if(e.getAttribute('aria-expanded') === 'true'){
        e.parentNode.setAttribute('setHeight','false');
        e.parentNode.setAttribute('itemFocus','false');
        e.parentNode.classList.remove('slide-in-left');
        e.parentNode.classList.add('slide-in-right');
        e.classList.remove('slide-in-left');
        e.classList.add('slide-in-right');

      }else{    
        e.parentNode.setAttribute('setHeight','true'); 
        e.parentNode.setAttribute('itemFocus','true');  
        e.parentNode.classList.remove('slide-in-right');
        e.parentNode.classList.add('slide-in-left');
        e.classList.remove('slide-in-right');
        e.classList.add('slide-in-left'); 
      }
    }

.menu-principal{
color: black;
width: 18rem;
height: auto;
border-radius: 4px;
border: 1px solid #9bc3d3;
margin-top: 10px;
display: inline-block;
padding: 0;
background-color: #fff;
}

.item-name {
color: black;
}

.item-name:hover{
color:black;
}

ul{
position: relative;
}

li[itemFocus="true"]{
position: absolute;
top: 1px;
left: 0px;
width: 100%;
min-height: 100%;
background-color: #fff;

}

li[itemFocus="false"]{
position: inherit;
top: auto;
left: auto;
width: auto;
min-height: 100%;
background-color: #fff;
}

.slide-in-left {
-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-in-right {
-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.collapsing {
width: 0;
height: auto;
transition-property: width;
position: relative;
height: 0;
overflow: hidden;
transition-timing-function: ease;
transition-duration: .10s;
transition-property: height;
}


@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}

@keyframes slide-in-right {
0% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}

@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}

@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}

 <div class="menu-principal">
    <ul class="nav flex-column">    
      <#list links as item>    
      <#if item.submenu?size == 0>
        <li class="nav-item">
          <a class="nav-link item-name" id="${item.name}" href="${item.link}">${item.name}</a>
        </li>
      <#else>
        <li class="dropdown menulevel1" itemfocus = "false" >
          <a href="javascript: void(0);" onclick="ariaTrue(this); changeHeight(this);" class="dropdown-toggle item-name nav-item" data-toggle="collapse" data-target="#${item.name?replace(" ", "-")}"  aria-expanded="false">
            <span class="icon-link2">
            ${item.name}
            </span>              
            <span class="">
            <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.00016 8.24071L1.37629 0.67075C1.19445 0.462934 0.878567 0.441879 0.67075 0.623722C0.462934 0.805566 0.441879 1.12145 0.623722 1.32926L7.62388 9.32926C7.82309 9.55692 8.17726 9.55692 8.37646 9.32926L15.3763 1.32925C15.5581 1.12143 15.5371 0.805553 15.3293 0.623715C15.1214 0.441876 14.8056 0.462938 14.6237 0.670759L8.00016 8.24071Z" fill="#222222"/>
            </svg>
            </span>
          </a>
          <ul class="nav flex-column collapse" id="${item.name?replace(" ", "-")}" role="menu1" aria-labelledby="btn-1">                        
          <#list item.submenu as submenu>              
          <#if (submenu.menulevel2?size != 0)>
            <li class="dropdown menulevel2">
              <a href="javascript: void(0);" onclick="ariaTrue(this);" class="dropdown-toggle item-name nav-item collapsed" aria-controls=${submenu.name?replace(" ", "-")} data-toggle="collapse" data-target=#${submenu.name?replace(" ", "-")} aria-expanded="false">
                <span class="icon-link2">
                  ${submenu.name}
                </span>                      
                <span class="">
                  <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.00016 8.24071L1.37629 0.67075C1.19445 0.462934 0.878567 0.441879 0.67075 0.623722C0.462934 0.805566 0.441879 1.12145 0.623722 1.32926L7.62388 9.32926C7.82309 9.55692 8.17726 9.55692 8.37646 9.32926L15.3763 1.32925C15.5581 1.12143 15.5371 0.805553 15.3293 0.623715C15.1214 0.441876 14.8056 0.462938 14.6237 0.670759L8.00016 8.24071Z" fill="#222222"/>
                  </svg>
                </span>
              </a>
              <ul class="nav flex-column collapse" id="${submenu.name?replace(" ", "-")}" role="menu2" aria-labelledby="btn-2">
        <#list submenu.menulevel2 as menulevel2>
        <#if (menulevel2.menulevel3?size != 0)>
          <li class="submenu-list-nv2">              
            <a class="dropdown-toggle item-name nav-item collapsed" href="javascript: void(0);" onclick="ariaTrue(this);" data-toggle="collapse" data-target=#${menulevel2.name?replace(" ", "-")} aria-expanded="false">
              <span class="icon-link2">                    
                ${menulevel2.name}
              </span>  
              <span class="">
                <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.00016 8.24071L1.37629 0.67075C1.19445 0.462934 0.878567 0.441879 0.67075 0.623722C0.462934 0.805566 0.441879 1.12145 0.623722 1.32926L7.62388 9.32926C7.82309 9.55692 8.17726 9.55692 8.37646 9.32926L15.3763 1.32925C15.5581 1.12143 15.5371 0.805553 15.3293 0.623715C15.1214 0.441876 14.8056 0.462938 14.6237 0.670759L8.00016 8.24071Z" fill="#222222"/>
                </svg>
              </span>          
            </a>
            <ul class="nav flex-column collapse" id="${menulevel2.name?replace(" ", "-")}" role="menu3" aria-labelledby="btn-3">
          <#list menulevel2.menulevel3 as menulevel3>
            <li class="submenu-list-nv3 " id="${menulevel3.name}">
              <a class="dropdown-toggle item-name nav-item"  href="javascript: void(0);" onclick="ariaTrue(this);">${menulevel3.name}</a>
              
            </li> 
          </#list>
        </ul>
          </li>
        <#else>
          <li class="submenu-list-nv2">
            <a class="dropdown-toggle item-name nav-item" href="#">${menulevel2.name}</a>
          </li> 
        </#if>      
        </#list>
        </ul> 
            </li>
          <#else>
            <li class="submenu-list-nv1">
              <a class="submenu-name item-name" href="#">${submenu.name}</a>
            </li>
        </#if>               
        </#list>
        </ul>
        </li>
      </#if>
      </#list>
    </ul>
  </div>