无法指向多级下拉菜单中的ul

<div class="dropdown">
  <button class="dropbtn">菜单</button>
  <ul class="dropdown-menu">
    <li><a href="#">选项1</a></li>
    <li class="dropdown-submenu">
      <a href="#">选项2</a>
      <ul class="dropdown-menu">
        <li><a href="#">子选项1</a></li>
        <li><a href="#">子选项2</a></li>
      </ul>
    </li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  min-width: 100px;
  z-index: 1;
}

.dropdown-submenu .dropdown-menu {
  left: 100%;
  top: 0;
}

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

// 点击菜单按钮展示或隐藏下拉菜单
var dropdown = document.getElementsByClassName("dropdown");
for (var i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownMenu = this.getElementsByClassName("dropdown-menu")[0];
    dropdownMenu.style.display = dropdownMenu.style.display === "block" ? "none" : "block";
  });
}

// 阻止子下拉菜单的点击事件冒泡
var dropdownSubmenu = document.getElementsByClassName("dropdown-submenu");
for (var i = 0; i < dropdownSubmenu.length; i++) {
  dropdownSubmenu[i].addEventListener("click", function(event) {
    event.stopPropagation();
  });
}