Drop down menu 嵌套的4号菜单，在3号菜单中有'；t下拉列表并显示其项目

嵌套的4号菜单（位于3号菜单中）不会下拉并显示其项 我需要制作嵌套菜单，我希望菜单按钮编号4下拉显示其项目，菜单按钮编号4在编号3内 ，你可以在这里找到代码 我试过了，但没用

男人{ 最大宽度：400px； 保证金：0自动； 填充：0； } #男人a{ 显示：块； 填充：0； 文字装饰：无； 颜色：#000； 线高：自动； } 标签{ 显示：块； 边距：0 0 2px 0； 填充：17px 25px；； 线高：1； 颜色：#fff； 背景：#44494b！重要； 光标：指针； 边界半径：8px； } 输入{ 显示：无； } #男ul{ 保证金：0； 填充：0； 背景#f4； 列表样式：无； } #门里{ 最大高度：0； 溢出y：隐藏； -webkit过渡：所有0.5s； -moz转换：所有0.5s； -ms转换：所有0.5s； -o型过渡：均为0.5s； 过渡：均为0.5s； } #菜单栏01：选中~#链接01 li， #菜单栏02：选中~#链接02 li， #菜单栏03：选中~#链接03 li { 最大高度：46px； 不透明度：1； }

2号




第一










3号

我是为你做的，但它是用html和javascript编写的

代码如下：

html:

---

我为你做，但它是在html和javascript

代码如下：

html:

<div>
    <ul id="list">
      <li>
        <label onclick="handleClick(event)" id="number1">Number1</label>
        <ul id="number1-links" class="numbers deactive">
        <li class="links">Link01</li>
        <li class="links">Link02</li>
        <li class="links">Link03</li>
        </ul></li>
      <li>
        <label onclick="handleClick(event)" id="number2">Number2</label>
        <ul id="number2-links" class="deactive numbers">
          <li class="links">Link01</li>
          <li class="links">Link02</li>
          <li class="links">Link03</li>
        </ul>
      </li>
      <li>
        <label onclick="handleClick(event)" id="number3">Number3</label>
        <ul id="number3-links" class="numbers deactive">
          <li class="links">Link01</li>
          <li class="links">Link02</li>
          <li class="links">Link03</li>
          <li class="links">
            <label onclick="handleClick(event)" id="number4">Number4</label>
            <ul id="number4-links" class="deactive numbers">
              <li class="links">Link01</li>
              <li class="links">Link02</li>
              <li class="links">Link03</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

handleClick = (event) => {
  let id = event.target.id
  let number1Links = document.getElementById(`${id}-links`)
  number1Links.classList.toggle("active")
  number1Links.classList.toggle("deactive")
}