开发多级下拉菜单时CSS集成失效，求代码问题排查及修复方法

代码问题说明 #

• HTML语法问题：多处a标签未闭合、列表层级嵌套错误、label的for属性与关联checkbox的id不一致，导致点击菜单标题无法触发展开
• CSS规则问题：仅实现了最基础的主菜单和一级子菜单显隐逻辑，缺少二三级子菜单的显隐规则，也没有菜单基础样式、交互效果的相关定义

修复后完整可运行代码 #

CSS部分

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: helvetica, sans-serif;
}

ul {
  list-style: none;
  padding-left: 20px;
  margin: 8px 0;
}

a {
  color: #333;
  text-decoration: none;
  display: block;
  padding: 4px 0;
}

a:hover {
  color: #2196F3;
}

.multi-level,
.item ul,
.sub-item ul,
.sub-sub-item ul,
.nav input[type="checkbox"] {
  display: none;
}

.nav label[for="menu"] {
  font-size: 24px;
  padding: 12px 16px;
  display: block;
  background: #f5f5f5;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.multi-level {
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.item label, .sub-item label, .sub-sub-item label {
  display: block;
  padding: 6px 0;
  cursor: pointer;
  font-weight: 500;
}

.item label:hover, .sub-item label:hover, .sub-sub-item label:hover {
  color: #2196F3;
}

#menu:checked ~ .multi-level,
.item:checked ~ ul,
.sub-item:checked ~ ul,
.sub-sub-item:checked ~ ul {
  display: block;
}

HTML部分

<div class="nav">
  <input type="checkbox" id="menu">
  <label for="menu">&#9776;</label>

  <div class="multi-level">
    <div class="item">
      <input type="checkbox" id="A">
      <label for="A">Coupant</label>
      <ul>
        <li><a href="#">Tête</a></li>
        <li><a href="#">corps</a></li>
        <li><a href="#">bras gauche</a></li>
        <li><a href="#">bras droit</a></li>
      </ul>
    </div>
    <div class="item">
      <input type="checkbox" id="B">
      <label for="B">Armes à feu</label>
      <ul>
        <li>
          <div class="sub-item">
            <input type="checkbox" id="B-A">
            <label for="B-A">Tête</label>
            <ul>
              <li>
                <div class="sub-sub-item">
                  <input type="checkbox" id="B-A-A">
                  <label for="B-A-A">1</label>
                  <ul>
                    <li><a href="#">blablablablabla blablablablabla</a></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

修复后点击左上角汉堡按钮可展开主菜单，点击各级菜单标题即可展开对应子菜单，hover菜单选项时会有颜色反馈。

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