<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
ul{
margin: 300px auto;
width:909px;
height: 38px;
background: pink;
list-style: none;
border: 1px solid;
overflow: hidden;
}
a{
text-decoration: none;
display: block;
color: black;
}
ul li{
float: left;
height: 100%;
width: 100px;
text-align: center;
line-height: 38px;
}
ul li:not(:last-child){
border-right: 1px solid;
}
ul li div.down{
width: 100%;
height: 100%;
background: aqua;
transition: .7s;
}
ul li:hover .down{
transform:translateY(-38px);
}
</style>
<script>
</script>
<body>
<div id="wrap">
<ul class="nav">
<li flag="a">
<a href="#">我的首页</a>
<div class="down"></div>
</li>
<li flag="b">
<a href="#">你的首页</a>
<div class="down"></div>
</li>
<li flag="c">
<a href="#">他的首页</a>
<div class="down"></div>
</li>
<li flag="d">
<a href="#">她的首页</a>
<div class="down"></div>
</li>
<li flag="e">
<a href="#">它的首页</a>
<div class="down"></div>
</li>
<li flag="f">
<a href="#">不知道的</a>
<div class="down"></div>
</li>
<li flag="g">
<a href="#">你猜猜是</a>
<div class="down"></div>
</li>
<li flag="h">
<a href="#">不告诉你</a>
<div class="down"></div>
</li>
<li flag="i">
<a href="#">不告诉她</a>
<div class="down"></div>
</li>
</ul>
<audio></audio>
</div>
<script type="text/javascript">
var liNode=document.querySelectorAll(".nav>li");
var audio=document.querySelector("audio");
for (var i=0;i<liNode.length;i++){
liNode[i].addEventListener("mouseenter",function () {
var flag=this.getAttribute("flag")
if (flag){
audio.src="http://s8.qhimg.com/share/audio/piano1/"+flag+"4.mp3";
audio.play();
}
})
}
</script>
</body>
</html>
