li element not appearing at bottom of menu

Question

I am building a menu with nested unordered lists. The problem I am having is that the last list item among the first unordered list is being overflown by a nested unordered list. That is, it will not move with the nested unordered list and remain at the bottom of the menu. Help would be appreciated.

document.querySelector('#btn').addEventListener('click', () => {
    document.querySelector('.main').classList.toggle('visible');
    document.querySelector('.sub-1').classList.remove('height');
    document.querySelector('.sub-2').classList.remove('height');
})

document.querySelector('#submen-1').addEventListener('click', (e) => {
    document.querySelector('.sub-1').classList.toggle('height');
    if(document.querySelector('.sub-2').classList.contains('height')) {
        document.querySelector('.sub-2').classList.remove('height');
    }
    e.stopPropagation();
})
document.querySelector('#submen-2').addEventListener('click', (e) => {
    document.querySelector('.sub-2').classList.toggle('height');
    e.stopPropagation();
})

* {
    box-sizing: border-box;
}
body {
    height: 100vh;
    padding: 0;
    margin: 0;
}

nav {
    height: 10vh;
    background-color: aquamarine;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#btn {
    position: absolute;
    top: 0;
    right: 10px;
    float: right;
    height: 10vh;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.main {
    display: flex;
    position: absolute;
    flex-direction: column;
    list-style-type: none;
    padding-left: 0;
    align-items: center;
    top: 10vh;
    margin: 0;
    visibility: 0;
}


.sub-1 {
    height: 0px;
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
    visibility: hidden;
    transition: height 1.7s ease-out;
}

.sub-2 {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    visibility: hidden;
    height: 0px;
    transition: height 1.7s ease-out;
    
}

.height {
    visibility: visible;
    height: 55.5px;
    transition: height 1.7s ease;
    -webkit-transition: height 1.7s ease;
}


.last-link {
    display: block;
    position: relative;
}
.visible {
    visibility: hidden;
}

<script src="https://kit.fontawesome.com/36947df53d.js"></script>
<nav>
          <a href="#" id="btn"><i class="fa-solid fa-bars"></i></a>
          <ul class="main">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#" id="submen-1">Sub</a>
                <ul class="sub-1">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#" id="submen-2">Sub-2</a>
                        <ul class="sub-2">
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="" id="last-link">Link</a></li>
          </ul>
      </nav>

Answer 1

Maybe this give you an idea on how to solve it, I'm just toggling the .last-link class.

document.querySelector('#btn').addEventListener('click', () => {
    document.querySelector('.main').classList.toggle('visible');
    document.querySelector('.sub-1').classList.remove('height');
    document.querySelector('.sub-2').classList.remove('height');
})

document.querySelector('#submen-1').addEventListener('click', (e) => {
    document.querySelector('.sub-1').classList.toggle('height');
    if(document.querySelector('.sub-2').classList.contains('height')) {
        document.querySelector('.sub-2').classList.remove('height');
    document.querySelector("#last-link").classList.toggle("last-link");    
    }
    e.stopPropagation();
})
document.querySelector('#submen-2').addEventListener('click', (e) => {
    document.querySelector('.sub-2').classList.toggle('height');
     document.querySelector("#last-link").classList.toggle("last-link");
    e.stopPropagation();
})

* {
    box-sizing: border-box;
}
body {
    height: 100vh;
    padding: 0;
    margin: 0;
}

nav {
    height: 10vh;
    background-color: aquamarine;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#btn {
    position: absolute;
    top: 0;
    right: 10px;
    float: right;
    height: 10vh;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.main {
    display: flex;
    position: absolute;
    flex-direction: column;
    list-style-type: none;
    padding-left: 0;
    align-items: center;
    top: 10vh;
    margin: 0;
    visibility: 0;
}


.sub-1 {
    height: 0px;
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
    visibility: hidden;
    transition: height 1.7s ease-out;
}

.sub-2 {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    visibility: hidden;
    height: 0px;
    transition: height 1.7s ease-out;
    
}

.height {
    visibility: visible;
    height: 55.5px;
    transition: height 1.7s ease;
    -webkit-transition: height 1.7s ease;
}


.last-link {
  display: block;
  position: relative;
  top: 50px;
}
      
.visible {
    visibility: hidden;
}

<script src="https://kit.fontawesome.com/36947df53d.js"></script>
<nav>
          <a href="#" id="btn"><i class="fa-solid fa-bars"></i></a>
          <ul class="main">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#" id="submen-1">Sub</a>
                <ul class="sub-1">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#" id="submen-2">Sub-2</a>
                        <ul class="sub-2">
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="" id="last-link">Link</a></li>
          </ul>
      </nav>