<ul id="menu"><li><a href="">菜单1</a><ul ><li><a href="">菜单1-1</a></li><li><a href="">菜单1-2</a></li><li><a href="">菜单1-3</a></li></ul></li><li><a href="">菜单2</a><ul ><li><a href="">菜单2-1</a></li><li><a href="">菜单2-2</a></li></ul></li></ul>

`)和列表项(`
• `)来构建菜单。注意，在第一级菜单项下要新建一个子列表(`
  `)来展示第二级菜单项。我们还为子列表指定了一个`class`为`sub-menu`，用于在后续设置样式或者操作时区分不同的部分。接下来，在JavaScript中，我们要找到菜单节点以及子列表，然后为它们添加动态效果。代码如下：

  var menu = document.getElementById("menu");var subMenus = menu.getElementsByClassName("sub-menu");for (var i = 0; i < subMenus.length; i++) {var subMenu = subMenus[i];var parent = subMenu.previousElementSibling;parent.addEventListener("mouseover", function() {subMenu.style.display = "block";subMenu.style.left = parent.offsetLeft + "px";subMenu.style.top = parent.offsetTop + parent.offsetHeight + "px";});parent.addEventListener("mouseout", function() {subMenu.style.display = "none";});}

  这段代码首先获取到了`menu`节点以及子列表`subMenus`。接下来通过遍历`subMenus`，为每一个子列表的父级菜单项添加了一个`mouseover`事件和一个`mouseout`事件。当鼠标移动到菜单项上时，子列表就会显示出来，而移开鼠标则会隐藏子列表。在显示子列表时，我们还通过计算菜单项的位置，让子列表出现在菜单项的下方。至此，我们就实现了一个简单的分级菜单效果。可以根据实际需求，扩展菜单的层级和样式。同时，当菜单项的数量比较多时，可以考虑使用递归来简化代码。