网站汉堡导航菜单显示异常求助：可点击但图标不显示

核心问题分析 #

图标不显示的原因集中在CSS语法错误、伪元素定位错误，同时存在HTML结构不符合规范的问题，这些导致汉堡的三条线无法正常渲染。

具体修复步骤 #

1. 修复CSS选择器语法错误 #

.menu_btn的子元素选择器中，span::before和span::after之间缺少逗号，导致后两个伪元素的样式未生效。修改后：

.menu_btn > span,
.menu_btn > span::before,
.menu_btn > span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #616161;
    transition-duration: .25s;
}

2. 修正伪元素垂直定位 #

当前before和after伪元素的top值都设为-8px，导致三条线重叠。调整为上下分布：

.menu_btn > span::before {
    content: '';
    top: -8px;
}
.menu_btn > span::after {
    content: '';
    top: 8px; /* 改为8px，让第三条线在下方 */
}

3. 调整HTML结构位置 #

汉堡菜单的<div class="hamburger-menu">被放在了<body>标签外，不符合HTML规范，会引发渲染异常。将其移到<body>内部，同时修正<head>标签的内容（<head>仅存放元数据，不能放页面内容）：

<!DOCTYPE html>
<html>
<head>
    <title>About Me</title>
    <link rel="stylesheet" type="text/css" href="mystylesheet.css">
</head>
<body id="mainstyle">
    <div class="header">
        <h1>About Me!</h1>
        <p> Who I am, what I like to do, etc.</p>
    </div>

    <div class="hamburger-menu">
        <input id="menu_toggle" type="checkbox">
        <label class="menu_btn" for="menu_toggle">
            <span></span>
        </label>

        <ul class="menu_box">
            <li> <a class="menu_item" href="index.html">Home</a></li>
            <li> <a class="menu_item" href="outreach.html">View My Socials</a></li>
            <li> <a class="menu_item" href="achievement-breakdown.html">View My Achievements</a></li>
            <li> <a class="menu_item" href="about-me.html"> About Me</a></li>
        </ul>
    </div>

    <p> Sample text to be replaced.</p>
</body>
</html>

4. 优化图标可见性（可选） #

汉堡菜单默认在黑色header区域，原深灰色线条对比度低，可改为白色增强可见性：

.menu_btn > span,
.menu_btn > span::before,
.menu_btn > span::after {
    /* 其他样式不变 */
    background-color: #fff;
}

5. 修正阴影语法错误 #

.menu_box的阴影值rgba(0, 0, 0, 4)无效，透明度需在0-1之间，改为：

box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);

修复后完整CSS代码 #

#mainstyle {
 background-color: white;
 color: black;
 text-align: center;
 font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
 margin: 0;
}

.header {
 padding: 90px;
 margin: 0px;
 background-color: black;
 text-align:center;
 color: white;
 font-size: 30px;
 font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* 汉堡菜单样式 */
#menu_toggle {
    opacity: 0;
}

#menu_toggle:checked + .menu_btn > span {
    transform: rotate(45deg);
}

#menu_toggle:checked + .menu_btn > span::before {
    top: 0;
    transform: rotate(0deg);
}
#menu_toggle:checked + .menu_btn > span::after {
    top: 0;
    transform: rotate(90deg);
}
#menu_toggle:checked ~ .menu_box {
    left: 0 !important;
}
.menu_btn{
    position: fixed;
    top: 20px;
    left: 20px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 100; /* 提高层级避免被遮挡 */
}
.menu_btn > span,
.menu_btn > span::before,
.menu_btn > span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition-duration: .25s;
}
.menu_btn > span::before {
    content: '';
    top: -8px;
}
.menu_btn > span::after {
    content: '';
    top: 8px;
}
.menu_box {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #eceff1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    transition-duration: .25s;
}
.menu_item {
    display: block;
    padding: 12px 24px;
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
}
.menu_item:hover {
    background-color: #cfd8dc;
}

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