如何实现卡片式汉堡菜单下拉效果 现有代码问题咨询

你当前使用的外层div嵌套ul列表的结构完全可以实现下拉滑动展示需求，无需更换为nav嵌套div的结构，按以下步骤修改即可修复现有问题：

CSS调整 #

• 给header标签添加相对定位，作为下拉菜单的定位父容器，避免菜单乱跑：

header {
  position: relative;
}

• 修改.topnav-menu样式，修复定位异常：

.topnav-menu {
    /* 保留原有属性，新增/修改以下配置 */
    position: absolute;
    right: 12%; /* 和全局左右padding对齐，保证菜单和右上角汉堡图标右边缘对齐 */
    width: fit-content;
    transition: var(--speed); /* 复用你预定义的过渡变量，保持全局样式统一 */
}

• 修改.topnav-menu ul样式，移除浮动避免布局异常：

.topnav-menu ul {
    /* 删除原有float: right配置，替换为以下内容 */
    text-align: right;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

JS调整 #

你当前手动计算菜单项高度的方式兼容性较差，直接使用元素的scrollHeight属性获取实际内容高度即可，不需要手动计算，后续增减菜单项也能自动适配：

function menuToggle() {
    const menu = document.getElementById("burgerMenu");
    menu.style.height = menu.style.height === "0rem" ? `${menu.scrollHeight}px` : "0rem";
}

你提到的纯CSS实现下拉菜单的思路也完全可以适配现有代码，核心逻辑是用隐藏的复选框关联汉堡图标，通过:checked伪类控制下拉菜单的高度切换，不需要写JS代码就能实现效果。

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup