【JavaScript练习】下拉菜单栏效果
运行结果
<!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>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
padding: 5px 20px;
display: inline-block;
}
li {
list-style: none;
}
.nav {
width: 100px;
margin: 100px auto;
}
.nav a {
width: 100%;
text-align: center;
}
.nav>li>a {
background-color: #fecc5b;
}
.nav-list a {
background-color: #fff5da;
}
.nav>li>a:hover,
.nav-list a:hover {
background-color: #f0ae14;
}
.nav-list {
display: none;
}
</style>
</head>
<body>
<!-- 下拉菜单栏效果 -->
<ul class="nav">
<li>
<a href="#">微博</a>
<ul class="nav-list">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="nav-list">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="nav-list">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
</ul>
<script>
var nav = document.querySelector('.nav');
var lis = nav.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>
</body>
</html>