![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：不论再复杂的多级导航， 原理都是一样的，掌握了这个， 其它也就没问题了
Collection
Collection
模仿对象图片
由于新手上路，我们只实现具体的下拉菜单功能即可。一、理清楚实现导航下拉菜单功能所涉及的知识点：
二、1.先拉起框架
<!DOCTYPE html>><html lang="en">><head>><meta charset="UTF-8" />><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>下拉菜单</title>
</head>
<body><ul id="nav"><li><img src="imgs/logo.png" alt="" /></li><li><a href="">首页</a></li><li><a href="">视频教程</a></li><li><a href="">入门教程</a></li><li><a href="">社区问答</a></li><li><a href="">技术文章</a><ul><li><a href="">头条</a></li><li><a href="">博客</a></li><li><a href="">PHP教程</a></li><li><a href="">PHP框架</a></li></ul></li><li><a href="">资源下载</a><ul><li><a href="">PHP工具</a></li><li><a href="">在线手册</a></li><li><a href="">学习课件</a></li><li><a href="">网站源码</a></li></ul></li><li><a href="">编程词典</a><ul><li>php词典</li><li>原生手册</li><li>mysql词典</li><li>html词典</li></ul></li><li><a href="">工具下载</a></li><li><a href="">php培训</a></li><li class="pic_1"><img src="imgs/user_avatar.jpg" alt="" /></li></ul></body></html>
浏览器显示效果
2.编写 css 样式（装饰一波）
<style>/* 元素样式初始化: 学到盒模型再详细介绍 */* {margin: 0;padding: 0;box-sizing: border-box;}/* 去掉所有a链接的下划线，且设置字体颜色 */a {/* color: rgba(255, 255, 255, 0.7); */color: #bbb;text-decoration: none;}/* 给图片设置高度，因为图片本身的高度可能影响布局 */img {height: 60px;}/* 给导航条设置黑色背景，高度，宽度，行高*/#nav {background-color: black;height: 60px;line-height: 60px;width: 100%;}/* 去掉列表标记,上下10px外边距，向左浮动*/li {list-style: none;margin: 0 10px;float: left;}/* 光标移动到文本上，字体高亮显示 */#nav > li > a:hover {color: white;}
/* 将父级设置为子菜单的定位容器,即转为定位元素即可 */#nav > li {position: relative;margin: 0 20px;
}/* 给下拉菜单设置边框属性及定位 */#nav > li > ul {position: absolute;top: 50px;width: 185px;border: 1px solid #aaa;border-top: none;}#nav > li > ul > li a {display: inline-block;height: 50px;line-height: 50px;color: #444;}/* ul.sub li:hover {background-color: #eee;} *//* 设置头像图片向右浮动 */.pic_1 {float: right;}/* 给头像图片设置圆角及位置 */.pic_1 img {border-radius: 50%;width: 40px;height: 40px;margin-top: 10px;}
/* 初始化时不要显示子菜单 */#nav > li > ul {display: none;}</style>
浏览器显示效果：
3.添加 javascript 脚本代码实现下拉菜单功能
<script>//获取所有的主导航const navs = document.querySelectorAll("#nav > li");navs.forEach(function (nav) {//鼠标移入时： 显示子菜单nav.addEventListener("mouseover", showSubMenu);//鼠标移出时： 关闭子菜单nav.addEventListener("mouseout", colseSubMenu);});//显示子菜单function showSubMenu(ev) {// console.log(ev.target);//当前这个导航有没有子菜单？if (ev.target.nextElementSibling !== null) {ev.target.nextElementSibling.style.display = "block";}}//关闭子菜单function colseSubMenu(ev) {//当前这个导航有没有子菜单？if (ev.target.nodeName == "A" && ev.target.nextElementSibling !== null) {ev.target.nextElementSibling.style.display = "none";}}
</script>
最终实现效果
后续会根据学到的新知识完善导航条更多功能！
天蓬老师