使用基础CSS时导航栏点击汉堡按钮后文字样式还原问题修复

你遇到的样式回退问题是3处代码错误共同导致的：

• 类名拼接逻辑错误：JS中给导航栏追加responsive类时没有加前置空格，最终元素的class属性值会变成top-navresponsive，完全匹配不上CSS中定义的ul.top-nav.responsive双类选择器，你写的移动端展开样式根本没有生效，链接直接使用浏览器默认的带下划线样式。
• HTML标签未闭合：汉堡按钮对应的<a>标签缺少闭合标签</a>，会造成DOM结构解析异常，打乱样式继承规则。
• 响应式布局属性设置错误：媒体查询中给展开后的列表项设置了display: inline，会破坏原有块级布局下的样式继承逻辑。

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

1. 修正JS的类名切换逻辑，追加类名时补充前置空格，同时修正字符串引号的笔误：

function Hamburger(){
  var x = document.getElementById("dropdownMenu");
  if(x.className === "top-nav"){
    // 类名前加空格，避免和原有类名拼接成无效类名
    x.className += " responsive";
  }else{
    x.className = "top-nav";
  }
}

2. 补全汉堡按钮处未闭合的a标签：

<li class="dropdownIcon">
  <a href="javascript:void(0)" onclick="Hamburger()">&#9776;</a>
</li>

3. 调整移动端媒体查询内的样式规则，把列表项的display属性改为block，同时补全链接的核心自定义样式，避免默认样式溢出：

@media screen and (max-width:680px){
    ul.top-nav li:not(:nth-child(1)){
        display:none;
    }
    ul.top-nav li.dropdownIcon{
        display: block;
        float:right;
    }
    ul.top-nav.responsive{
        position:relative;
    }
    ul.top-nav.responsive li{
        display: block; /* 移除原有的inline值，避免布局和样式异常 */
        float:none;
    }
    ul.top-nav.responsive li a {
        display:block;
        text-align:left;
        text-decoration: none;
        color: rgb(54, 49, 49);
        text-transform: uppercase;
    }
    ul.top-nav.responsive li a:hover{
        background-color: #0080ff;
        color: #fff;
    }
}

修改完成后，点击汉堡按钮时导航栏会正确被添加上两个有效类名，匹配到你写的响应式CSS规则，链接不会再出现默认下划线，所有自定义导航样式都会正常生效。

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