问在没有js的情况下，有什么快速代码可以生成可点击的弹出菜单吗？

EN

/*---POPUP MENU CSS---*/
.box {
  position: fixed;
  top: 0.1%;
  left: 14px;
  display: inline-block;
  cursor: pointer;
}

ul {
  list-style-type: none;
}

ul li {
  font-family: Lato;
  padding: 10px;
}

ul li a {
  text-decoration: none;
  color: black;
}

ul li:hover {
  background-color: bisque;
}

.box1 {
  position: absolute;
  top: 3%;
  left: 15px;
  z-index: 1;
  background-color: floralwhite;
  max-width: 260px;
  box-sizing: border-box;
  box-shadow: 2px 5px 15px black;
  display: none;
}

.box2 {
  position: absolute;
  top: 3%;
  left: 8%;
  z-index: 2;
  background-color: floralwhite;
  max-width: 260px;
  box-sizing: border-box;
  box-shadow: 2px 5px 15px black;
  display: none;
}

#nav li:focus .box2 {
  display: block;
}


/**
 * Checkbox toggle
 */

/* hide the checkbox */
.menu-toggle {
  display: none;
}

/* display the box when input is checked */
.menu-toggle:checked ~ .box1 {
  display: block;
}

<!--box-->
<div class="box">
  <!-- hidden checkbox -->
  <input class="menu-toggle" id="menu-toggle" type="checkbox" />
  
  <!-- label for the toggle -->
  <label for="menu-toggle">
    <img src="https://img.icons8.com/ios-filled/344/menu-rounded.png"
      height="35px"width="35px" id="menu">
  </label>
  
  <!--box1-->
  <div class="box1">
    <ul>
      <li id="nav"><a href="#">item1  &#187;</a></li>
      <li><a href="#">item2</a></li>
      <li><a href="#">item3</a></li>
      <li><a href="#">item4</a></li>
      <li><a href="#">item5</a></li>
      <li><a href="#">item6</a></li>
    </ul>
  </div>
</div>
<!--box2-->
<div class="box2">
  <ul>
    <li><a href="#">sub-item1</a></li>
    <li><a href="#">sub-item2</a></li>
    <li><a href="#">sub-item3</a></li>
    <li><a href="#">sub-item4</a></li>
  </ul>
</div>