<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
color: black;
}
.nav {
width: 40px;
height: 20px;
}
li {
list-style: none;
}
.nav>li {
background-color: wheat;
width: 40px;
text-align: center;
}
.nav ul {
position: relative;
left: -40px;
display: none;
}
.nav ul li {
padding: 10px 20px 0px 20px;
background-color: wheat;
width: 40px;
height: 40px;
text-align: center;
cursor: pointer;
}
.nav ul li:hover {
background-color: antiquewhite;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
</li>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</ul>
<script>
let nav = document.querySelector('.nav'); //
let nav_li = nav.children[0]; // hover之后出来下拉菜单
let nav_lis = nav.children[1]; // 下拉菜单们
let nav_lis_length = nav_lis.children.length;
console.log(nav_lis.children[1]);
nav_li.onmouseover = function () {
nav_lis.style.display = 'block'
for (let i = 0; i < nav_lis_length; i++) {
// hover在下拉菜单也要显示
nav_lis.children[i].onmouseover = function () {
nav_lis.style.display = 'block'
}
// 离开下拉菜单不显示
nav_lis.children[i].onmouseout = function () {
nav_lis.style.display = 'none'
}
}
}
// 离开nav不显示
nav_li.onmouseout = function () {
nav_lis.style.display = 'none'
}
</script>
</body>
</html>
