<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery</title>
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<style>
*{ margin:0px; padding:0px; list-style:none; }
body{ font-size:12px; }
.nav{ float:left; clear:both; margin:100px 0 0 100px; display:inline; }
.nav li{ float:left; position:relative; }
.nav li a{ display:block; width:80px; padding:8px 0px 6px; text-align:center; color:#000; background:#ccc; text-decoration:none; }
.nav li a:hover { background:#666; color:#fff; }
.nav li ul{ position:absolute; display:none; }
.nav li ul li { float:none; }
.nav li ul li a{ background:#eee; }
</style>
<script type="text/javascript">
$(document).ready(function(){
var li = $("#mainNav li"); //找到#mainNav中子元素li；
li.each(function(i){ //循环每一个LI
li.eq(i).hover(
function(){
$(this).find("ul").slideDown("fast"); //找到li里面的ul元素设置为显示
},
function(){
$(this).find("ul").slideUp("fast");
}
)
})
})
</script>
</head>
<body>
<ul id="mainNav" class="nav" >
<li><a href="javascript:void(0);">首 页</a></li>
<li><a href="javascript:void(0);">导航菜单</a>
<ul>
<li><a href="javascript:void(0);">采购</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" >企业采购</a>
<ul>
<li><a href="javascript:void(0);">企业评测</a></li>
<li><a href="javascript:void(0);">企业报价</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">行情报价</a>
<ul>
<li><a href="javascript:void(0);">导航1</a></li>
<li><a href="javascript:void(0);">导航2</a></li>
<li><a href="javascript:void(0);">导航3</a></li>
</ul>
</li>
</ul>
</body>
</html>
声明：本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自 你好！刘
本文地址：JQ简易的二级菜单
发表评论