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> <script> //获取所有的主导航 const zhudaohang = document.querySelectorAll("#nav > li"); //鼠标进入的情况下检查菜单有没有子菜单，有的话显示子菜单 zhudaohang.forEach(function (xxx) { //鼠标进入时显示子菜单 xxx.addEventListener("mouseover", xianshi); //注册鼠标离开的时候的事件 xxx.addEventListener("mouseout", guanbi); }); //显示子菜单 function xianshi(xx) { //当前的导航有没有子菜单 if (xx.target.nextElementSibling !== null) { xx.target.nextElementSibling.style.display = "block"; } } //关闭子菜单 function guanbi(xx) { //当前的导航有没有子菜单,有的话就显示子菜单 if ( xx.target.nodeName === "A" && xx.target.nextElementSibling !== null ) { xx.target.nextElementSibling.style.display = "none"; } } // function guanbi(xx) { // //当前的导航有没有子菜单，有的话就隐藏子菜单 // if (xx.target.nextElementSibling !== null) { // xx.target.nextElementSibling.style.display = "none"; // } // } </script> </body>
css代码如下
<style> /* 元素样式初始化:学到盒模型再详细介绍 */ * { margin: 0; padding: 0; box-sizing: border-box; } 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>
实际效果
总结 刚学完这节课晕晕的，回放看了几遍，陌生命令仔细研究了一遍，感觉熟悉了很多
