如何在弹出菜单中实现下拉菜单？

<ul class="menu">
  <li>菜单项1</li>
  <li>菜单项2
    <ul class="dropdown">
      <li>下拉菜单项1</li>
      <li>下拉菜单项2</li>
      <li>下拉菜单项3</li>
    </ul>
  </li>
  <li>菜单项3</li>
</ul>

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

.menu li {
  display: inline-block;
  position: relative;
}

.menu li:hover .dropdown {
  display: block;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f9f9f9;
  padding: 0;
  margin: 0;
}

.dropdown li {
  display: block;
}

var menuItems = document.querySelectorAll('.menu li');

menuItems.forEach(function(item) {
  item.addEventListener('mouseover', function() {
    this.querySelector('.dropdown').classList.add('show');
  });

  item.addEventListener('mouseout', function() {
    this.querySelector('.dropdown').classList.remove('show');
  });

  item.addEventListener('click', function() {
    this.querySelector('.dropdown').classList.toggle('show');
  });
});