HTML+CSS编写的汉堡菜单无法在网站显示问题求助

通过HTML搭建汉堡菜单结构、编写对应CSS样式后，菜单无法在页面正常显示，以下是具体问题定位和修复方案。

现有问题代码 #

HTML结构 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEXT Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <nav class="navbar">
            <div class="navbar__container">
                <a href="/" id="navbar__logo">NEXT</a>
                <div class="navbar__toggle" id="mobile-menu">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
                <ul class="navbar__menu">
                    <li class="navbar__item">
                        <a href="/" class="navbar__links">Home</a>
                    </li>
                    <li class="navbar__item">
                        <a href="/tech.html" class="navbar__links">Tech</a>
                    </li>
                    <li class="navbar__item">
                        <a href="/" class="navbar__links">Products</a>
                    </li>
                    <li class="navbar__btn">
                        <a href="/" class="button">Sign Up</a>
                    </li>
                </ul>
            </div>
        </nav>
    </body>
</html>

关联CSS代码 #

.navbar__toggle.bar{
        width: 25px;
        height: 3px;
        margin:5px auto;
        transition: all 0.3s ease-in-out;
        background:#ffff;
    }

 #mobile-menu{
        position: absolute;
        top:20%;
        right: 5%;
        transform: translate(5%, 20%);
        display: block;
    }

问题定位 #

HTML结构无错误，故障全部来自CSS写法问题，核心错误点如下：

• 选择器语法错误：.navbar__toggle.bar是交集选择器，仅匹配同时携带navbar__toggle和bar两个类的单个元素，但实际bar类是navbar__toggle容器下的子span元素，两个类分属父子节点，导致汉堡条样式完全没有匹配到目标元素。
• 颜色值无效：background:#ffff为4位十六进制RGBA值，等价于完全透明的白色，即便样式匹配成功，汉堡条也会因全透明无法被看到。
• 定位参考系缺失：#mobile-menu设置了绝对定位，但父容器.navbar__container默认是static定位，无法作为绝对定位的参考基准，导致汉堡按钮位置偏移，甚至可能跑出导航栏可视区域。
• 元素显示模式不匹配：承载汉堡条的<span>是行内元素，默认不支持width、height属性设置，即便选择器匹配正确，三个横条也无法正常渲染为预期的块状横杠。

修复方案 #

按以下步骤修改CSS即可解决问题：

1. 修正选择器：将.navbar__toggle.bar改为.navbar__toggle .bar（两个类名中间加空格），用后代选择器匹配容器下的所有汉堡条span。
2. 修正颜色值：将background:#ffff改为实色值，比如深色背景导航栏用#fff（白色），浅色背景导航栏用#000（黑色）。
3. 补充定位基准：给.navbar__container添加position: relative，让汉堡按钮的绝对定位相对于导航栏容器生效。
4. 修正元素显示模式：给.bar类添加display: block，让宽高、边距属性正常生效。
5. （可选优化）调整定位偏移值：将#mobile-menu的top改为50%、transform改为translate(5%, -50%)，实现汉堡按钮在导航栏内垂直居中，同时添加cursor: pointer优化鼠标悬浮交互。

修复后参考CSS #

/* 导航栏容器设置相对定位，作为汉堡按钮的定位基准 */
.navbar__container {
    position: relative;
    height: 80px; /* 可根据实际导航栏高度调整，避免定位偏移 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
}

/* 修正后的汉堡条样式 */
.navbar__toggle .bar {
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background: #000; /* 深色导航栏请替换为#fff */
    display: block;
}

#mobile-menu {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translate(5%, -50%);
    display: block;
    cursor: pointer;
}

/* 可选：屏幕宽度大于768px（桌面端）时隐藏汉堡按钮 */
@media screen and (min-width: 768px) {
    #mobile-menu {
        display: none;
    }
    .navbar__menu {
        display: flex;
        align-items: center;
        list-style: none;
    }
}

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