在html的侧边栏上创建下拉菜单时遇到困难

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

.sidebar {
  width: 200px;
}

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

.menu li {
  margin-bottom: 10px;
}

.menu li a {
  display: block;
  text-decoration: none;
  color: #333;
}

.dropdown-menu {
  display: none;
}

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

var dropdowns = document.getElementsByClassName('dropdown');

for (var i = 0; i < dropdowns.length; i++) {
  dropdowns[i].addEventListener('mouseover', function() {
    this.getElementsByClassName('dropdown-menu')[0].style.display = 'block';
  });

  dropdowns[i].addEventListener('mouseout', function() {
    this.getElementsByClassName('dropdown-menu')[0].style.display = 'none';
  });
}