html - 我做了一个可悬停的菜单，效果很好。但我想对其进行一些更改并使其成为可点击的下拉菜单

Question

这是css文件：

input[type="checkbox"]{
    width: 1vw; /Desired width/
    height: 1vw; /Desired height/
    cursor: pointer;
  }
ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: white;
    color: #124D51
  }

  ul li {
    display: block;
    position: relative;
    float: left;
    background: white;
    color: #124D51
  }


  li ul { display: none; }

  ul li a {
    display: block;
    padding: 1em;
    text-decoration: none;
    white-space: nowrap;
    color:  #124D51;
  }

  ul li a:hover { 
      background: #FBDE11;
      color:  #124D51
    }

   ul li a:focus{
    background: #FBDE11;
    color:  #124D51
    }


  li:hover > ul {
    display: block;
    position: absolute;
    background: #FBDE11;
  }


  li:hover li { float: none; }

  li:hover a { background: white;
    color: #124D51
  }

  li:hover li a:hover { background: #FBDE11; }

  .main-navigation li ul li { border-top: 0; }
  ul ul ul {
    left: 100%;
    top: 0;
  }

  ul:before,
  ul:after {
    content: " "; /* 1 */
    display: table; /* 2 */

  }

  ul:after { clear: both; }

  #final_list{
    background-color: white;    
    line-height: 0.1vw;
    font-size: 1vw;
    height: 20vw;
    overflow-y: scroll;
  }


  #final_list p a{
    background-color: white;
    line-height: 0.1vw;
  }
  #final_list p {
    background-color: white;
  }
#subcat{
    margin-top: -1.5vw;
}

这是html代码：

<ul class="main-navigation">
 <li><a href="#" id="main">Product Requirements</a>
  <ul>
    {data.map((options, i) => (
      <li><a href="#">{options.name}</a>
        <ul >
          {options.categories && options.categories.map((opt, i) => (
            <li><a href="#" onClick={() => { }}>{opt.name}</a>
              <ul id="final_list">
                {opt.categories && opt.categories.map((cat, i) => (
                  <> <center><input placeholder="Search" /> </center><br />
                  <p><a href="#"><strong>{cat.name}</strong></a>
                    <p style={{ fontSize: "0.8vw", display: "flex" }}>

                    <a onClick={() => { this.checkCategory(`${options.name}/${opt.name}/${cat.name}`) }} style={{ cursor: "pointer", color: this.state.sel_all_req.length ? "blue" : "black" }}>Select All</a>
                    <a onClick={() => { this.uncheckCategory(`${options.name}/${opt.name}/${cat.name}`) }} style={{ cursor: "pointer", marginLeft: "4vw" }}>Clear All</a>
                  </p>
                  {cat.categories && cat.categories.map((subcat, i) => (
                    <p id="final_sub_list">
                      <a id="subcat">
                        <input type="checkbox" name={`${options.name}/${opt.name}/${cat.name}`} id={`${options.name}/${opt.name}/${cat.name}/${subcat}`} onClick={() => { this.add_req(`${options.name}/${opt.name}/${cat.name}/${subcat}`) }} /> &emsp;
                        {subcat}
                      </a>
                    </p>
                  ))}
                  </p>
                  </>
                ))}
              </ul>
            </li>
          ))}
        </ul>
      </li>
    ))}
  </ul>
 </li>
</ul>

我想启用单击以切换下拉列表并更改所有当前打开<a>的背景颜色（路径）。我已经尝试过 JQuery 并添加了 classList，但没有奏效。您能建议对代码进行任何简单且最少的更改吗？