本文实例讲述了jquery实现的淡入淡出下拉菜单效果。分享给大家供大家参考。具体如下：

这是一款jQuery带有淡入淡出效果的下拉菜单，可作为一个下拉导航菜单的模板，移动鼠标到一级主菜单上看一看，在有包括二级子菜单的菜单项上悬停时，二级菜单渐变显示出来，兼容性也是很不错的，希望大家喜欢哈。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-淡入淡出-菜单-样式-代码/

具体代码如下：

！DOCTYPE html heart heta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8' /titlejQuery下拉菜单效果/titlestylebody，div，dl，dt，dd，ul，ol，li，h1，h2，h3，h4，h5，h6，pre，form，fieldset，input，textarea，p，blockquote，th，td { margin:0padding:0 }表{边框-塌陷：塌陷；border-spacing:0}fieldset，img { border:0 }地址，标题，引用，代码，dfn，em，strong，th，var { font-style : normal；font-weight:normal}ol，ul { list-style : none }标题，th{text-align:left}h1、h2、h3、h4、h5、h6 { font-size :100%；font-weight : normal } q : before，q : before { content : ' ' }缩写，缩写{ border :0 } : focus { outline :0 } ins { text-declaration : none } del { text-declaration : line-to } a { color : # fff；文本装饰：无；} a :悬停{文本装饰：下划线；} a { color : black } # nav Li { float : left；相对位置：} #导航阿利{ background : # d6cfbdborder : 3px固体# 4f 4026 color : # 333 display :块；margin : 0 5px 0 0 padd : 5px 8 px } # nav阿利：悬停{背景： # f7f 7；文本装饰：无；} #导航{ display:块；height : 35 xpadd : 10px 0；宽度： 500像素；z指数： 100；绝对位置：} #导航阿利{边框-左上角-半径： 10px边框-右上角-半径： 10px-moz-border-radius-topleft : 10px；-moz-border-radius-top right : 10px；-web套件-边框-左上角-半径： 10px-web套件-边框-右上角-半径： 10px} # nav Li ul {背景： # E1 DD 3；border: 3px固体# 4f 4026 color : # 333 display :无；边距：-3px 0 0 0；宽度： 200像素；绝对位置：} # nav Li ul Li {宽度： 100% } # nav Li ul阿利{ background:无；border:无；线高： 30px保证金： 0；padding: 0 0 0 5px } # nav Li ul阿利：悬停{背景： # f7f 7；} #李导航。当前a {后台： # f7f 7；} # nav Li :悬停ul。子{ display :块；}/style！-脚本类型=' text/JavaScript ' src=' http://Ajax。谷歌API。com/Ajax/libs/jquery/1。4 .2/jquery。量滴js？ver=1。4 .2 '/script-script type=' text/JavaScript ' src=' jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(' # nav ul。儿童).移除CLaSS(' child ')；$('#nav li ').have(' ul ').悬停(function(){ $(this)).addClass('current ').儿童(' ul ').fadeIn()；}，function() { $(this).removeClass(“”当前')。儿童(' ul ').hide()；});});/script/head dydiv id=' page-wrap ' div id=' content ' h2jquery带有半铸钢钢性铸铁(Cast Semi-Steel)回退的子导航/h2ul id='nav'lia href='# '网站主页/a/lilia href='# '开源源码/aul class=' child ' lia href=' # ' PHP源码/a/li lia href='#'ASP源码/a/li lia href='#'JSP源码/a/li lia href='#'Ajax源码/a/li/ul/lilia href='# '服务/aul class='child' lia href='# '广告业务/a/li lia href='# '安装/a/li lia href='# '设置/a/li/ul/lilia href='# '关于我们/a/lilia href='# '联系人/a/li/ul/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。