![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
WJCorrection status：qualified
Teacher's comments：写的不错，很认真，继续加油！
Collection
Collection
通过对元素设置position属性，可以让元素出现在相应设置的位置。定位有四种类型：
| 脱离文档流 | block元素 | 覆盖下层文本 | 层次是否提高 | |
|---|---|---|---|---|
| relatived | 是 | 否 | 是 | 否 |
| absolute | 是 | 是 | 是 | 是 |
| fixed | 是 | 是 | 是 | 是 |
网页中的每个元素对象产生某些事件。元素对象添加事件监听器，当相应事件发生时，相应的javascript函数进行相应
element.addEventListener(event, function, useCapture);
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width = device-width,initial-scale = 1.0" /><title>navs</title><link href="nav.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="listener.js"></script></head><body><ul id="nav"><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="">PHP工具</a></li> <!-- 二级菜单--><li><a href="">手册</a></li><li><a href="">JS特效</a></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></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></html>
样式设置思路：
将两个二级ul设置为默认不可见，通过js处理可见性
```css
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
#nav >> li {
margin-left: 20px;
position: relative;
}
a {
color: white;
text-decoration: none;
}
#nav {
background-color: black;
/ height: 50px; /
line-height: 50px;
font-size: 5px;
position: absolute;
}
#nav > li > ul {
position: absolute;
top: 50px;
left: 10px;
background-color: rgb(241, 225, 225);
font-size: 10px;
width: 130px;
/ height: 200px; /
}
#nav > li > ul > li {
margin-left: 5px;
}
li {
float: left;
}
#nav> li > ul > li > a {
display: block;
width: 60px;
height: 30px;
line-height: 30px;
}
#nav > li > a:hover {
color: red;
}
#nav > li > ul > li > a:hover {
color: saddlebrown;
}
#nav > li > ul {
display: none;
}
## javascript源码```javascriptwindow.onload = function () {//通过事件冒泡，添加事件监听，当A标签或li标签事件被触发，执行li事件响应const navs = document.querySelectorAll("#nav > li"); //获取#nav下的子li元素navs.forEach(function (nav) {nav.addEventListener("mouseover", showSubMenu); //为每个li绑定鼠标移动到a标签监听程序nav.addEventListener("mouseout", closeSubMenu); //为每个li绑定鼠标移开到a标签监听程序});//移动到标签相应函数function showSubMenu(ee) {console.log(ee.target);console.log(this);if (ee.target.nodeName == "A" && ee.target.nextElementSibling != null) {//判断触发事件的对象是否为A标签的兄弟标签ulee.target.nextElementSibling.style.display = "block";}}//移开标签相应函数function closeSubMenu(ee) {if (ee.target.nodeName == "A" && ee.target.nextElementSibling != null) {ee.target.nextElementSibling.style.display = "none";}}};
效果