汉堡图标不显示、响应式导航菜单无法正常触发问题求解

• 原生CSS不支持嵌套选择器语法，你在媒体查询块内将导航项样式、图标显示规则全部嵌套写入ul选择器的大括号范围，浏览器解析时会判定这段规则无效直接丢弃，最终导致小屏下汉堡图标无法显示、菜单规则不生效。
• 缺失勾选状态下的图标切换逻辑：仅定义了小屏下汉堡图标显示规则，未配置菜单展开时的图标切换状态。
• 原嵌套结构中的li { left: 65px }规则属于无效语法，会导致导航文字位置偏移。

CSS #

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
  font-family: 'Roboto', sans-serif;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

nav {
  background-color: orange;
  height: 80px;
}

nav ul {
  float: left;
  margin-left: 10px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 15px;
}
nav ul li a {
  position: relative;
  color: white;
  font-size: 18px;
  text-transform: uppercase;
  padding: 5px 0;
}
nav ul li a:before {
  position: absolute;
  content: '';
  left: 0;
  height: 3px;
  width: 100%;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: right;
  background-color: white;
  transition: transform .4s linear;
}
nav ul li a:hover:before {
  transform: scaleX(1);
  transform-origin: right;
}
label #btn,
label #cancel {
  color: white;
  font-size: 30px;
  float: left;
  line-height: 80px;
  margin-left: 20px;
  cursor: pointer;
  display: none;
}
#check {
  display: none;
}

@media (max-width: 980px) {
  nav ul {
    position: fixed;
    height: 100vh;
    width: 70%;
    background-color: orange;
    text-align: left;
    top: 80px;
    left: -100%;
    transition: all .4s;
    margin-left: 0;
  }
  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 30px;
    padding-left: 20px;
  }
  label #btn {
    display: block;
  }
  nav ul li a {
    font-size: 16px;
  }
  #check:checked ~ ul {
    left: 0;
  }
  #check:checked ~ label #btn {
    display: none;
  }
  #check:checked ~ label #cancel {
    display: block;
  }
}

HTML #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

<nav>
  <input type="checkbox" id="check">
  <label>
    <i class="fa fa-bars" id="btn"></i>
    <i class="fa fa-times" id="cancel"></i>
  </label>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Forums</a></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Vote</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</nav>

• 桌面端（屏宽>980px）：横向导航正常展示，汉堡/关闭图标默认隐藏
• 小屏端（屏宽≤980px）：汉堡图标显示，侧边菜单默认收起在可视区域外；点击汉堡后菜单滑入展示，图标切换为关闭态；点击关闭图标菜单重新收起。

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