嵌套导航菜单末尾li无法自动适配子菜单高度调整位置

布局错位是CSS写法问题导致的：

• 你给展开的子菜单写死了固定height: 55px，当第二层.sub-2展开时，它的父级.sub-1高度还是固定55px，不会被子元素撑开，后续的.last-link只按55px的高度偏移，自然就跑到了第二层子菜单的左侧。
• 子菜单没有设置溢出隐藏，固定高度的写法完全无法适配多层嵌套展开后的实际占位高度，没法推动后续元素下移。
• 你给nav写死了height: 10vh，就算子菜单展开，导航容器高度也不会变，会直接溢出和其他内容重叠。

不用额外写JS计算高度，调整CSS规则，让元素跟随正常文档流自动排布即可：

1. 把固定height改成max-height实现展开收起，同时加overflow: hidden，让父容器可以自动适配子元素的总高度
2. 删掉冗余未使用的.height样式，不要给元素写死top偏移
3. 把导航栏的固定高度改成最小高度，允许容器随内容自动增高

修正后的CSS代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
}

nav {
  min-height: 10vh;
}

ul {
  list-style-type: none;
}

/* 子菜单默认收起状态 */
.sub-1, .sub-2 {
  max-height: 0;
  visibility: hidden;
  overflow: hidden;
  padding-left: 1rem;
  transition: all 0.2s ease;
}

/* 子菜单展开状态 */
.active {
  max-height: 500px;
  visibility: visible;
}

JS逻辑优化 #

原有的点击切换类名的代码核心逻辑可用，简化第二层菜单的切换逻辑、补充事件冒泡拦截即可：

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

修改完成后，无论展开多少层嵌套子菜单，父级容器都会自动计算总高度，.last-link会自动被推到所有展开内容的下方，不会再出现错位问题。

内容的提问来源于stack exchange，提问作者Brian