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

这里使用jQuery实现简洁下拉菜单导航效果，代码规范，兼容性方面：支持IE6，火狐1.5，Opera 8，Safari 3，Chrome 0.2。简洁明快的jquery网站菜单，请参阅代码。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-简单-向下-显示-菜单-导航-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titlejQuery下拉菜单导航/title style body {背景： # 6595 a3padding: 0 20px } .清除{clear:两者；飞越：隐藏；高度： 0 } #所有{宽度： 80%;最小宽度： 650像素；margin : 40px auto 0 autobackground : # fcd id；padd : 20px 35px } h1 { font : 26px Tahoma，arial color : # 324143 } p { font 3360 12px Tahoma，arial color : # 171 f26 margin-bottom : 25px } a { color : # 324143 } #版权{宽度： 80%；最小宽度： 650像素；余量： 0自动添加： 20px 35px背景技术# B6C28Bfont: 12px tahoma，arialcolor : # 324143 } #版权所有a { color: # 324143 } #版权所有a:悬停{ color : # 171 f26 } # jsddm { margin : 0；padding: 0 } # jsddm li {左侧浮动：列表样式：无；font: 12px Tahoma，Arial}#jsddm阿利{ display:块背景： # 324143;padding: 5px 12px文本装饰：无；右边框： 1px纯白色；宽度： 70px颜色： # EAGOD空白： nowrap } # js DDM阿利：悬停{背景： # 24313 c } # js DDM Li ul {边距： 0；padd : 0；绝对位置：可见性：隐藏；边框-top: 1px纯白} # js DDM Li ul Li { float : none display : inline } # js DDM Li ul阿利{横向：自动背景# a9c 251 color : # 24313 c } # jsddm Li ul :悬停{ background : # 8ea 344 }/style/headdydiv id=' all ' h1j query简洁下拉菜单导航/h1p简洁明快的jquery网站菜单，请参阅代码/pscript src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' var time out=500；var closetimer=0；var ddmenuitem=0；函数jsddm _ open(){ jsddm _ cancel timer()；jsddm _ close()；ddmenuitem=$(this).查找(' ul ').等式(0).' CSS('可见','可见');}函数jsddm _ close(){ if(ddmenuitem)ddmenuitem。CSS('可见性'，'隐藏')；}函数jsddm _ timer(){ closetimer=window。settimeout(jsddm _ close，超时)；}函数jsddm _ cancel timer(){ if(closetimer){ window。clear time out(close time er)；closetimer=null}}$(文档)。ready(function(){ $('#jsddm li ')).bind('mouseover '，jsddm _ open)；$('#jsddm li ').bind('mouseout '，jsddm _ timer)；});document . onclick=jsddm _ close/script/pul id=' jsddm ' lia href=' # ' JAVAScript/a ul lia href=' # '下拉菜单/a/li lia href='#'jQuery插件/a/li lia href='#'Ajax导航/a/li /ul /li lia href='# '效果/a ul lia href='# '幻灯切换/a/li lia href='# '淡入淡出效果/a/li lia href='# '不透明度模式/a/li lia href='# '下滑阴影/a/li lia href='# '半透明/a/li /ul /li lia href='# '导航/a ul lia href='# '幻灯片效果/a/li lia href='# '淡入淡出效果/a/li lia href='# '投影/a/Li/ul/Li lia href=' # ' HTML/CSS/a ul lia href=' # '图片特效/a/li lia href='# '不透明度模式/a/li lia href='# '静态网页/a/Li/ul/Li帮助/a/Li/uldiv/兼容： IE6，火狐1.5，Opera 8，Safari 3，Chrome 0.2 br/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。