知識點
- 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;
width: 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{
width: 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>
