仅用CSS和HTML实现的响应式导航栏下拉菜单异常求助

先看你提供的代码和描述，首先能发现几个核心问题，咱们一步步来修复：

1. 先解决CSS语法错误 #

你给出的媒体查询代码没有闭合最后的大括号，这会导致整个媒体查询内的样式无法被浏览器正确解析，这也是VS里显示混乱的关键原因之一。修正后的完整媒体查询代码如下：

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon { position: absolute; right: 0; top: 0; }
  .topnav.responsive a { float: none; display: block; text-align: left; }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn { display:block; width: 100%; text-align: left; }
}

2. 完善下拉菜单的基础样式逻辑 #

默认状态下下拉内容需要隐藏，只有触发时才显示，补充基础样式：

/* 基础下拉内容样式：默认隐藏 */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* 桌面端通过hover触发下拉显示 */
.dropdown:hover .dropdown-content {
  display: block;
}

3. 添加JavaScript处理移动端交互 #

移动端无法通过hover触发下拉，必须添加JS来控制菜单的展开/收起状态，以及下拉内容的显示：

// 切换导航栏的responsive类，控制移动端菜单展开
function toggleNav() {
  const topnav = document.getElementById("myTopnav");
  topnav.className = topnav.className === "topnav" ? "topnav responsive" : "topnav";
}

// 处理移动端下拉菜单的点击触发
function toggleDropdown() {
  const dropdownContent = this.nextElementSibling;
  dropdownContent.style.display = dropdownContent.style.display === "block" ? "none" : "block";
}

// 给所有下拉按钮绑定点击事件
document.querySelectorAll(".topnav .dropbtn").forEach(btn => {
  btn.addEventListener("click", toggleDropdown);
});

4. 优化移动端下拉菜单的显示适配 #

在媒体查询里补充样式，避免下拉内容显示混乱：

@media screen and (max-width: 600px) {
  /* 保留原有样式 */
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon { position: absolute; right: 0; top: 0; }
  .topnav.responsive a { float: none; display: block; text-align: left; }
  .topnav.responsive .dropdown {float: none;}
  
  /* 新增：让下拉内容占满父容器宽度，对齐更整齐 */
  .topnav.responsive .dropdown-content {
    position: relative;
    width: 100%;
    box-shadow: none;
  }
  
  .topnav.responsive .dropdown .dropbtn { 
    display:block; 
    width: 100%; 
    text-align: left; 
  }
}

最后确保你的HTML结构包含触发移动端菜单的.icon元素，示例结构如下：

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#link1">Link 1</a>
      <a href="#link2">Link 2</a>
      <a href="#link3">Link 3</a>
    </div>
  </div>
  <a href="#about">About</a>
  <!-- 移动端菜单触发按钮 -->
  <a href="javascript:void(0);" class="icon" onclick="toggleNav()">&#9776;</a>
</div>

做完这些调整后，移动端的下拉菜单应该就能正常触发和显示，不会出现混乱的情况了。

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