<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function unfold(li) {
$(li).children("ul").show();
};
function fold(li) {
$(li).children("ul").hide();
}
//隐藏所有 ul ,层次选择器
$(function () {
$("div ul li ul").hide();
});
</script>
<meta charset="utf-8" />
</head>
<body>
<div style="width:200px;height:100px" >
<ul>
<li><a href="">首页</a></li>
<li onmousemove ="unfold(this)" οnmοuseοut="fold(this)" >
<a href="">人工智能</a>
<ul>
<li><a href="">机器学习</a></li>
<li><a href="">深度学习</a></li>
<li><a href="">语音识别</a></li>
<li><a href="">计算机视觉</a></li>
<li><a href="">NLP</a></li>
</ul>
</li>
<li οnmοusemοve="unfold(this)" οnmοuseοut="fold(this)">
<a href="">移动开发</a>
<ul>
<li><a href="">iOS</a></li>
<li><a href="">微信开发</a></li>
<li><a href="">Swift</a></li>
<li><a href="">Android</a></li>
</ul>
</li>
<li οnmοusemοve="unfold(this)" οnmοuseοut="fold(this)">
<a href="">编程语言</a>
<ul>
<li><a href="">Java</a></li>
<li><a href="">C/C++</a></li>
<li><a href="">C#</a></li>
<li><a href="">Python</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
效果:
|