HTML与CSS汉堡菜单点击不显示问题求助

你的汉堡菜单点击后没反应，核心是缺少复选框选中状态下显示菜单的CSS规则，再加上布局上的小问题导致功能失效，下面一步步解决：

1. 核心缺失：绑定复选框选中与菜单显示的逻辑 #

你只写了移动端隐藏菜单的规则，但没定义点击汉堡图标（触发复选框选中）后菜单的显示逻辑。需要添加:checked伪类选择器，关联菜单元素：

@media all and (max-width:1060px) {
    /* 保留原有label样式 */
    label {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        top: 18%;
        font-size: 50px;
        margin: 0 auto;
        cursor: pointer;
    }

    /* 保留原有菜单隐藏规则 */
    nav #tabs {
        display: none;
        flex-direction: column;
        height: 200px;
    }

    /* 新增：复选框选中时，强制显示菜单 */
    #toggle:checked ~ #tabs {
        display: flex;
    }
}

2. 修复导航栏高度截断问题 #

你的nav设置了固定高度height: 104px，移动端菜单展开后会被导航栏挡住，需要把移动端的导航栏高度改成自适应：

@media all and (max-width:1060px) {
    nav {
        height: auto;
        padding: 15px 0;
    }
}

3. 优化移动端布局细节 #

• 去掉菜单原有相对定位，避免布局混乱
• 调整菜单项间距、对齐方式，适配移动端
• 修正logo的定位，让它在移动端正常显示

完整修改后的CSS代码 #

#img_snark {
    width: 273px;
    height: 37px;
    position: relative;
    margin-right: 5%;
    left: 3%;
    top: 30%;
}

label, #toggle {
    display: none;
}

nav {
    position: relative;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 104px;
    margin-left: 100px;
    margin-right: 100px;
    box-shadow: 0 0 50px #0000001A;
    background-color: white;
    z-index: 1;
}

nav li {
    list-style-type: none;
    height: 30px;
    font-family: "Dosis", "sans-serif";
    color: #00525D;
    display: flex;
    align-items: center;
}

#tabs {
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: flex-end;
    position: relative;
    right: 4%;
    bottom: 19%;
}


@media all and (max-width:1060px) {
    label {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        top: 18%;
        font-size: 50px;
        margin: 0 auto;
        cursor: pointer;
    }

    nav #tabs {
        display: none;
        flex-direction: column;
        height: 200px;
        position: static;
        gap: 10px;
        padding-left: 0;
        align-items: center;
        margin-top: 20px;
    }

    #toggle:checked ~ #tabs {
        display: flex;
    }

    nav {
        height: auto;
        padding: 15px 0;
        margin-left: 20px;
        margin-right: 20px;
    }

    #img_snark {
        position: static;
        margin: 10px auto;
        display: block;
    }
}

为什么之前没效果？ #

CSS的~兄弟选择器会选中复选框之后的同级元素，你的HTML结构里#toggle在#tabs前面，所以#toggle:checked ~ #tabs能正确关联触发逻辑。之前没加这个规则，就算点击label触发了复选框选中，菜单也不会自动显示。

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