首先，我们需要一个主菜单和多个子菜单，这些菜单可以使用ul和li标签来实现。主菜单下面的每一个子菜单都会有一个触发事件，当用户鼠标悬停或点击时，子菜单才会展开，同时，我们可以在子菜单下面再添加多级菜单，这样可以更细致地划分内容分类。
下面是一个实现二级菜单的例子：
<ul>
<li>主菜单1
<ul>
<li>子菜单1-1</li>
<li>子菜单1-2</li>
</ul>
</li>
<li>主菜单2
<ul>
<li>子菜单2-1</li>
<li>子菜单2-2</li>
</ul>
</li>
</ul>
可以看出，这是一个包含两个主菜单，每个主菜单下面都有两个子菜单的二级菜单。当用户悬停或点击主菜单时，相应的子菜单就会通过css的控制展开或收起。
下面我们来看一下如何使用javascript实现这个菜单的交互效果。首先，我们需要为每一个主菜单添加一个事件监听器，当鼠标悬停或点击时触发。在事件函数内部，我们需要获取到该主菜单下的所有子菜单，然后为它们添加样式，使它们显示出来。
下面是实现代码：
let menus = document.querySelectorAll('li');
for (let i = 0; i < menus.length; i++) {
menus[i].onmouseover = function() {
menus[i].querySelector('ul').style.display = 'block';
}
menus[i].onmouseout = function() {
menus[i].querySelector('ul').style.display = 'none';
}
}
可以看出，这个代码很简洁，只有几行。它使用querySelectorAll函数遍历每一个li元素，然后为每一个li元素设置onmouseover和onmouseout监听函数，当鼠标悬停上去时，子菜单变为可见，当鼠标离开时，子菜单再次变为不可见。
总之，使用javascript实现二级菜单是非常简单和方便的，只需要使用少量的代码就可以轻松完成。如果您正在开发网站或应用程序，并需要实现这个交互效果，可以参考上述代码，快速实现您所需的功能。
上一篇：javascript中函数的问题
下一篇：javascript中内置对象
