如何使用CSS、HTML和javascript将菜单从父菜单折叠和展开到子菜单？

<ul class="menu">
  <li>父菜单1
    <ul class="submenu">
      <li>子菜单1</li>
      <li>子菜单2</li>
    </ul>
  </li>
  <li>父菜单2</li>
</ul>

.menu {
  list-style-type: none;
  padding: 0;
}

.menu li {
  cursor: pointer;
}

.submenu {
  display: none;
}

.submenu li {
  padding-left: 20px;
}

var parentItems = document.querySelectorAll('.menu > li');

parentItems.forEach(function(item) {
  item.addEventListener('click', function() {
    var submenu = this.querySelector('.submenu');
    if (submenu) {
      submenu.style.display = (submenu.style.display === 'none') ? 'block' : 'none';
    }
  });
});