List item not adjusting itself to bottom of menu-CodePudding

I have created a menu of nested list. The problem is, when I add a second nested list, the last li element among the first group of list elements doesn't adjust it's height from the top of the page to account for the height of the second ul('.sub-2'). It appears to the left but not below the ul. How do I get the last link ('.last-link') to account for the height of the second ul so that it appears below the ul.

$(document).ready(function() {
  $('#submen-1').on('click', function(e) {
    $('.sub-1').toggleClass("active");
    e.stopPropagation();
  })
  
  $('#submen-2').on('click', function() {
    if ($('.sub-2').hasClass("active")) {
      $('.sub-2').removeClass("active");
    } else {
      $('.sub-2').addClass("active");
    }
  })
});

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
}

nav {
  height: 10vh;
}

ul {
  list-style-type: none;
}

.sub-1 {
  height: 0px;
  visibility: hidden;
}

.sub-2 {
  height: 0px;
  visibility: hidden;
}

.active {
  height: 55px;
  visibility: visible;
}

.height {
  display: block;
  position: relative;
  top: 55.5px;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav>
    <a href="#" id="btn"><i ></i></a>

    <ul >
      <li><a href="contact.html">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#" id="submen-1">Sub</a>
        <ul >
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#" id="submen-2">Sub-2</a>
            <ul >
              <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">Last Link</a></li>
    </ul>
  </nav>

  <script src="script.js"></script>
</body>

CodePudding user response：

Setting the height to 55px is limiting the second sub level to it only being that, without accounting for the 3rd sub menu that has another 55px. Instead of having a set height of 55px have it set to auto.

$(document).ready(function() {
  $('#submen-1').on('click', function(e) {
    $('.sub-1').toggleClass("active");
    e.stopPropagation();
  })
  
  $('#submen-2').on('click', function() {
    if ($('.sub-2').hasClass("active")) {
      $('.sub-2').removeClass("active");
    } else {
      $('.sub-2').addClass("active");
    }
  })
});

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
}

nav {
  height: 10vh;
}

ul {
  list-style-type: none;
}

.sub-1 {
  height: 0px;
  visibility: hidden;
}

.sub-2 {
  height: 0px;
  visibility: hidden;
}

.active {
  height: auto;
  visibility: visible;
}

.height {
  display: block;
  position: relative;
  top: 55.5px;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav>
    <a href="#" id="btn"><i ></i></a>

    <ul >
      <li><a href="contact.html">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#" id="submen-1">Sub</a>
        <ul >
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#" id="submen-2">Sub-2</a>
            <ul >
              <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">Last Link</a></li>
    </ul>
  </nav>

  <script src="script.js"></script>
</body>