纯HTML/CSS实现Navbar汉堡菜单失效，请求排查错误

问题核心原因 #

汉堡菜单点击无反应，是因为CSS选择器的层级匹配错误：
你写的#click:checked ~ #sidebar要求#click和#sidebar是直接相邻的兄弟元素，但实际HTML结构里，#click的下一个兄弟是#logo，#sidebar嵌套在#menubar内部，两者并非直接兄弟关系，导致选择器完全失效。

具体修复步骤 #

1. 修正CSS选择器 #

在@media screen and (max-width:1024px)媒体查询块内，把原来的：

#click:checked ~ #sidebar{
    display:block;
}

替换成：

#click:checked ~ #menubar #sidebar{
    display:flex;
}

• 这里先通过#click:checked ~ #menubar选中#click的兄弟元素#menubar，再用后代选择器定位到内部的#sidebar，就能正确触发菜单显示。
• 把display:block改成display:flex，因为#sidebar原本是flex布局，保持布局一致性避免样式错乱。

2. 优化菜单显示体验（可选） #

为了让菜单更清晰，可给移动端的#sidebar补充以下样式：

#sidebar{
    flex-direction:column;
    position:absolute;
    top:17%;
    left:0%;
    width:100%;
    color:black; /* 原白色在浅背景下看不清，改成黑色 */
    background-color:rgba(255,255,255,0.95); /* 半透明白色增强可读性 */
    padding-top:15px;
    padding-bottom:15px;
    row-gap:2rem;
    display:none;
    z-index:999; /* 确保菜单在其他元素上方 */
}
#hamburger{
    opacity:1;
    cursor:pointer; /* 添加鼠标指针样式，提示可点击 */
}
.button{
    width:80%; /* 调整按钮宽度，避免占满整个屏幕 */
}

修复后完整代码片段 #

CSS修正后的媒体查询块 #

@media screen and (max-width:1024px){
    #hamburger{
        opacity:1;
        cursor:pointer;
    }

    #sidebar{
        flex-direction:column;
        position:absolute;
        top:17%;
        left:0%;
        width:100%;
        color:black;
        background-color:rgba(255,255,255,0.95);
        padding-top:15px;
        padding-bottom:15px;
        row-gap:2rem;
        display:none;
        z-index:999;
    }

    .button{
        width:80%;
    }
    
    .menu_option:hover{
        color:rgb(168, 84, 98);
    }

    #click:checked ~ #menubar #sidebar{
        display:flex;
    }
}

HTML结构（无需修改） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div id="upper_bar">
     <p id="upper_para">Welcome to HelpHub - Where Solutions Meet Innovation!</p>
    </div>
    <header>
        <nav>
          <input type="checkbox" id="click">
          <div id="logo">
            <img id="pic_of_logo" src="helphub_logo.png">
          </div>
          <div id="menubar">
           <ul id="sidebar">
            <li><a href="#" class="menu_option">Products</a></li>
            <li><a href="#" class="menu_option">Customers</a></li>
            <li><a href="#" class="menu_option">Pricing</a></li>
            <li><a href="#" class="menu_option">Resources</a></li>
            <li><a class="button" href="#">Sign in</a></li>
            <li><a class="button" id="sign_up" href="#">Sign up</a></li>
           </ul>   
           <label for="click">
            <i class="fa-solid fa-bars" id="hamburger"></i>
          </label>
          </div>
        </nav>
    </header>
</body>    
</html>

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