首先：
在 HTML 文件中，需要创建一个菜单容器元素，在该元素下创建一级菜单项元素，每个一级菜单项元素下面再添加二级菜单项元素。
在 CSS 文件中，通过给菜单项元素设置合适的样式来美化菜单的外观。
在 JavaScript 文件中，则需要实现菜单的交互效果，包括鼠标悬停/离开时的效果等
写好html
<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> <li><a href="#">菜单3</a></li> </ul>
在该结构中，ul 元素的 id 属性被设置为 menu，该元素下是一些 li 元素，每个 li 元素又包含一个 a 元素和一个子菜单 ul 元素。其中，一级菜单项的 a 元素是可点击的超链接，而二级菜单项的 a 元素则只起到了文本展示的作用
加上css
#menu { list-style: none; margin: 0; padding: 0; } #menu > li { display: inline-block; margin-right: 10px; position: relative; } #menu > li > ul { display: none; position: absolute; top: 100%; left: 0; z-index: 1; } #menu > li:hover > ul { display: block; } #menu > li > ul > li { display: block; white-space: nowrap; } #menu > li > ul > li > a { display: block; padding: 5px; background-color: #eee; color: #333; text-decoration: none; } #menu > li > ul > li > a:hover { background-color: #ccc; }
加上js
let menu = document.getElementById('menu'); menu.addEventListener('mouseover', function (e) { if (e.target.nodeName === 'LI') { var ul = e.target.querySelector('ul'); if (ul) { ul.style.display = 'block'; } } }); menu.addEventListener('mouseout', function (e) { if (e.target.nodeName === 'LI') { let ul = e.target.querySelector('ul'); if (ul) { ul.style.display = 'none'; } } });
其中：使用 document.getElementById('menu') 获取到菜单容器元素 ul
使用 menu.addEventListener('mouseover', ...) 给菜单容器添加鼠标悬停事件监听。
在事件处理函数中，首先需要判断当前鼠标滑过的元素是否是 li 元素，如果是，则找到该元素下的 ul 子元素并将其显示出来即可 你学会了吗？
