如何实现仅移动端展示的汉堡菜单并收纳导航分类项？

你只需修改现有代码中媒体查询部分的CSS规则，补充下拉组件的移动端适配逻辑即可，具体修改如下： #

修改点1：调整移动端默认隐藏规则 #

将原有第一个max-width: 600px的媒体查询内容替换为以下代码，实现≤600px宽度时隐藏除汉堡图标外的所有导航元素：

@media screen and (max-width: 600px) {
  /* 隐藏所有普通导航链接和下拉组件，仅保留汉堡图标 */
  .topnav a:not(.icon), .topnav .dropdown {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

修改点2：补充移动端展开后的适配规则 #

在原有第二个max-width: 600px的媒体查询中新增下拉组件相关样式，保证点击汉堡图标后所有导航内容正常展开：

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  } 
  .topnav.responsive a:not(.icon) {
    float: none;
    display: block;
    text-align: left;
  }
  /* 展开状态下显示下拉组件 */
  .topnav.responsive .dropdown {
    float: none;
    display: block;
    text-align: left;
  }
  /* 二级下拉菜单适配移动端宽度 */
  .topnav.responsive .dropdown-content {
    position: relative;
    min-width: 100%;
    box-shadow: none;
  }
  .topnav.responsive .dropdown .dropbtn {
    width: 100%;
    text-align: left;
  }
}

修改完成后即可实现预期效果：视口宽度≤600px时绿色导航栏仅显示汉堡图标，点击图标后所有导航分类在图标下方展开显示，原有二级下拉菜单功能也可正常使用。

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