三级下拉菜单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三级下拉菜单</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function unfold(li) {
$(li).children("ul").show();
};
function fold(li) {
$(li).children("ul").hide();
}
//隐藏所有ul
$(document).ready(function(){
$("div ul li ul").hide();
});
</script>
</head>
<body>
<div style="width:200px;height:100px" >
<ul><!-- 一级菜单 -->
<li><a href="">首页</a></li>
<li onmousemove="unfold(this)" onmouseout="fold(this)"> <!-- 使用onmousemove和onmouseout实现鼠标移上时展开下拉菜单，鼠标移开时收缩下拉菜单功能 -->
<a href="">编程语言</a>
<ul><!-- 二级菜单 -->
<li onmousemove="unfold(this)" onmouseout="fold(this)">
<a href="">JavaScript</a>
<ul><!-- 三级菜单 -->
<li><a href="">jQuery</a></li>
<li><a href="">AJAX</a></li>
<li><a href="">JSON</a></li>
</ul>
</li>
<li><a href="">C/C++</a></li>
<li><a href="">C#</a></li>
</ul>
</li>
<li onmousemove ="unfold(this)" onmouseout="fold(this)" >
<a href="">人工智能</a>
<ul>
<li><a href="">机器学习</a></li>
<li><a href="">深度学习</a></li>
<li><a href="">语音识别</a></li>
</ul>
</li>
<li onmousemove="unfold(this)" onmouseout="fold(this)">
<a href="">移动开发</a>
<ul>
<li><a href="">iOS</a></li>
<li><a href="">微信开发</a></li>
<li><a href="">Android</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>使用onmousemove和onmouseout实现鼠标移上时展开下拉菜单，鼠标移开时收缩下拉菜单功能。