Java下拉式导航_jQuery实现简单下拉导航效果

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

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

运行效果截图如下：

在线演示地址如下：

具体代码如下：

jQuery下拉导航

$(function(){

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

function(){

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

},

function(){

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

}

);

});

*{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;}

• 首页

• 链接

  • aaa
  • bbb
  • ccc
  • ddd

• 相册

  • 11
  • 22
  • 33
  • 44

• 博客

  • AA
  • BB
  • CC
  • DD

• 关于

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