目标：模仿PHP中文网头部下拉菜单，如图所示
运用技术
1.列表；
2.css
3.js的鼠标移入与移除的监听时间
代码展示
1.HTML部分:
<body><ul id="nav"><li><a href="">首页</a></li><li><a href="">视频教程</a></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></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></ul></body>
2.css部分：
<style>/* 元素样式初始化: 学到盒模型再详细介绍 */* {margin: 0;padding: 0;box-sizing: border-box;}a {/* color: rgba(255, 255, 255, 0.7); */color: #bbb;text-decoration: none;}#nav {background-color: black;height: 50px;line-height: 50px;}li {list-style: none;margin: 0 10px;float: left;}#nav > li > a:hover {color: white;}/* 将父级设置为子菜单的定位容器,即转为定位元素即可 */#nav > li {position: relative;}#nav > li > ul {position: absolute;top: 50px;width: 180px;border: 1px solid #aaa;border-top: none;}#nav > li > ul > li a {display: inline-block;height: 50px;color: #444;}ul.sub li:hover {background-color: #eee;}/* 初始化时不要显示子菜单 */#nav > li > ul {display: none;}</style>
3.js部分：
<script>const navs = document.querySelectorAll("#nav > li");navs.forEach(function (nav) {//鼠标移入菜单监听事件nav.addEventListener("mouseover", show);//鼠标移出菜单监听事件nav.addEventListener("mouseout", out);});//显示子菜单function show(ev) {if (ev.target.nextElementSibling !== null) {ev.target.nextElementSibling.style.display = "block";}}//关闭子菜单function out(ev) {if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {ev.target.nextElementSibling.style.display = "none";}}</script>
总结
1.CSS样式调整不熟悉及部分代码不清楚；
2.js的监听，冒泡运用不熟练及事件和代码的不清楚