jQuery实现简单下拉导航效果

 本文实例讲述了jQuery实现简单下拉导航效果。分享给大家供大家参考。具体如下：

这里粗略做一款基于jquery的下拉导航菜单效果，我觉得挺不错，虽然没有怎么美化，但是代码易懂，另外修补的空间也比较大，相信对学习CSS以及jquery的朋友有不小的帮助。

运行效果截图如下：

具体代码如下：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>jQuery下拉导航</title>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<script type="text/javascript">

$(function(){

$('.nav').children("li:has(ul)").hover(

function(){

$(this).children("ul").slideDown();

},

function(){

$(this).children("ul").hide();

}

);

});

</script>

<style type="text/css">

*{margin:0;padding:0;}

.nav {margin:200px;list-style-type:none;}

.nav li {position:relative;float:left;margin-right:10px;}

.nav li ul {display:none;position:absolute;top:20px;left:0;list-style-type:none;}

.nav li ul li {padding:2px 0;}

</style>

</head>

<body>

<ul class="nav">

<li><a href="#">首页</a>

</li>

<li>

<a href="#">链接</a>

<ul>

<li><a href="#">aaa</a></li>

<li><a href="#">bbb</a></li>

<li><a href="#">ccc</a></li>

<li><a href="#">ddd</a></li>

</ul>

</li>

<li>

<a href="#">相册</a>

<ul>

<li><a href="#">11</a></li>

<li><a href="#">22</a></li>

<li><a href="#">33</a></li>

<li><a href="#">44</a></li>

</ul>

</li>

<li>

<a href="#">博客</a>

<ul>

<li><a href="#">AA</a></li>

<li><a href="#">BB</a></li>

<li><a href="#">CC</a></li>

<li><a href="#">DD</a></li>

</ul>

</li>

<li>

<a href="#">关于</a>

</li>

<div style="clear:both"></div>

</ul>

</body>

</html>

希望本文所述对大家的jquery程序设计有所帮助。