知识问答
如何用JavaScript实现一个三级下拉菜单的导航效果？
2025-09-21 16:44:16
来源：互联网转载
``
javascript，，，，， ul {， list-style-type: none;， margin: 0;， padding: 0;， }， li {， position: relative;， }， li a {， display: block;， text-decoration: none;， background-color: #f1f1f1;， padding: 5px 10px;， }， li a:hover {， background-color: #ddd;， }， .submenu {， display: none;， position: absolute;， top: 100%;， left: 0;， }， .submenu .submenu {， top: 0;， left: 100%;， }， li:hover > .submenu {， display: block;， }，，，，，菜单项 1，，子菜单项 1.1，子菜单项 1.2，子菜单项 1.3，，子菜单项 1.3.1，子菜单项 1.3.2，，，，，菜单项 2，菜单项 3，，，，`，，这段代码使用了嵌套的无序列表（和`）来创建三级下拉菜单。通过CSS样式，实现了下拉菜单的基本外观和交互效果。当鼠标悬停在父菜单项上时，子菜单会显示出来。三级下拉菜单的js实现代码-网页特效→导航菜单
HTML结构
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三级下拉菜单</title> <link rel="stylesheet" href="style.css"></head><body> <nav> <ul id="menu"> <li><a href="#">一级菜单1</a> <ul> <li><a href="#">二级菜单1-1</a> <ul> <li><a href="#">三级菜单1-1-1</a></li> <li><a href="#">三级菜单1-1-2</a></li> </ul> </li> <li><a href="#">二级菜单1-2</a> <ul> <li><a href="#">三级菜单1-2-1</a></li> <li><a href="#">三级菜单1-2-2</a></li> </ul> </li> </ul> </li> <li><a href="#">一级菜单2</a> <ul> <li><a href="#">二级菜单2-1</a> <ul> <li><a href="#">三级菜单2-1-1</a></li> <li><a href="#">三级菜单2-1-2</a></li> </ul> </li> <li><a href="#">二级菜单2-2</a> <ul> <li><a href="#">三级菜单2-2-1</a></li> <li><a href="#">三级菜单2-2-2</a></li> </ul> </li> </ul> </li> </ul> </nav> <ｓｃｒｉｐｔ src="ｓｃｒｉｐｔ.js"></ｓｃｒｉｐｔ></body></html>
CSS样式（style.css）
body { font-family: Arial, sans-serif;}nav { background-color: #333;}nav ul { list-style: none; padding: 0; margin: 0;}nav li { position: relative;}nav li a { display: block; padding: 0 20px; line-height: 40px; color: #fff; text-decoration: none;}nav li ul { position: absolute; left: 100%; top: 0; display: none;}nav li:hover > ul { display: block;}三、JavaScript代码（ｓｃｒｉｐｔ.js）
document.addEventListener('DOMContentLoaded', function() { var menu = document.getElementById('menu'); var subMenus = menu.getElementsByTagName('ul'); for (var i = 0; i < subMenus.length; i++) { subMenus[i].style.display = 'none'; }});相关问题与解答
问题1：如何修改鼠标悬停时的背景颜色？
答：可以通过在CSS中添加:hover伪类选择器来实现，将背景颜色更改为蓝色：
nav li:hover > a { background-color: blue;}问题2：如何添加过渡动画效果？
答：可以使用CSS的transition属性为菜单项添加过渡动画效果，为菜单项添加渐隐渐现的动画效果：
nav li > ul { transition: all 0.3s ease;}
上一篇：如何创建一个高质量的网站
