将鼠标悬停在下拉列表中的<li>上创建一个子菜单。就像Udemy网站下拉菜单一样

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

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

.menu li {
  display: inline-block;
  position: relative;
  padding: 10px;
  background-color: #f1f1f1;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f1f1f1;
}

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

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

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('mouseover', function() {
    var submenu = this.querySelector('.submenu');
    if (submenu) {
      submenu.style.display = 'block';
    }
  });

  menuItems[i].addEventListener('mouseout', function() {
    var submenu = this.querySelector('.submenu');
    if (submenu) {
      submenu.style.display = 'none';
    }
  });
}