代码如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>下拉菜单</title><style>a {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></head><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><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><script>// 获取所有的主导航const navs = document.querySelectorAll("#nav > li");navs.forEach(function (nav) {// 鼠标移入时: 显示子菜单nav.addEventListener("mouseover", showSubMenu);// 鼠标移出时: 关掉子菜单nav.addEventListener("mouseout", closeSubMenu);});// 显示子菜单function showSubMenu(ev) {console.log(ev.target);// 当前这个导航有没有子菜单?if (ev.target.nextElementSibling !== null) {ev.target.nextElementSibling.style.display = "block";}}// 关掉子菜单function closeSubMenu(ev) {if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {ev.target.nextElementSibling.style.display = "none";}}//判断有没有元素标签A// 无序列表 + 事件监听 + 事件委托</script></html>
效果展示
实现步骤
- 1.先创建一个导航
- 2.通过无序列表，定义好要显示的菜单
- 3.通过布局实现样式
- 4.通过事件来实现下拉效果
总结
通过子菜单的样式，理解了绝对定位、相对定位的概念。
子绝父相，即相对定位是给父级的，绝对定位的时候是给子级的