知识点
- jquery 的引入方式
- children 只获取子元素，不获取孙元素
- show() 显示、 hide() 隐藏。
完整代码
<!--
Author: XiaoWen
Create a file: 2017-02-27 11:24:01
Last modified: 2017-02-27 17:16:06
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#nav{
background: #eee;
600px;
height: 40px;
margin: 0 auto;
}
ul{
list-style:none;
}
ul li{
float: left;
line-height: 40px;
text-align: center;
position: relative;
}
a{
text-decoration: none;
color: #000;
display: block;
padding: 0 10px;
height: 40px;
}
a:hover{
color: #fff;
background: #666;
}
ul li ul li{
float: none;
background: #eee;
margin-top: 2px;
}
ul li ul{
position: absolute;
left: 0;
top: 40px;
}
ul li ul li a{
80px;
}
ul li ul li a:hover{
background: #06f;
}
ul li ul{
display: none;
}
ul li:hover ul{
/* display: block; */
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">一级菜单1</a></li>
<li><a href="#">一级菜单2</a></li>
<li>
<a href="#">一级菜单3</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li><a href="#">一级菜单4</a></li>
<li><a href="#">一级菜单5</a></li>
<li><a href="#">一级菜单6</a></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
// $ 等于 jQuery
// $(function(){}) 等于 $(document).ready(function(){})
// 表示整个文档加载完成后再执行相应的函数。
$(function(){
// 选择器 > 表示子元素
$('#nav>ul>li').mouseover(function(){
// children 只获取子元素，不获取孙元素
$(this).children('ul').show()
})
$('#nav>ul>li').mouseout(function(){
$(this).children('ul').hide()
})
})
</script>
</body>
</html>