<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<style type="text/css">
.mainlevel ul{display:none;}
ul,li {list-style-type:none;}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('li.mainlevel').mousemove(function () {
$(this).find('ul:first').attr("style", "display:block;");
});
$('li.mainlevel').mouseleave(function () {
$(this).find('ul:first').attr("style", "display:none");
});
});
</script>
</head>
<body>
<ul id="nav">
<li class="mainlevel" id="mainlevel_01"><a href="#">添加订单<span></span></a>
<ul id="sub_01">
<li class="mainlevel"><a href="#">JavaScript</a>
<ul>
<li>nihao</li>
</ul>
</li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="mainlevel" id="Li1"><a href="#">修改订单<span></span></a>
<ul id="Ul1">
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
</ul>
</body>
</html>
简单的多级下拉菜单
最新推荐文章于 2022-09-28 08:55:58 发布