jQuery实现的导航下拉菜单效果示例

本文实例讲述了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=utf-8' /title导航/titlelink rel='样式表type=' text/CSS ' href=' CSS/basic。CSS '/样式。t-nav { width :100%；高度：50 px背景技术： # 124057;}.m-nav { width :1000 px；高度：50 pxmargin:0 auto}。ui-item { width :99 px；高度：50 px线高：50 px文本对齐：居中；右边框：1px实心# 103447;}.ui-menu { width :119 px；高度：50 px线高：50 px文本对齐：居中；背景： # 168 db 8 URL(img/menu _ ico。gif)无重复101 px 23 px右边框：1px实心# 0c769e位置：相对；}.ui-menu-cont { width :119 px；位置：绝对；top :50 pxleft :0 pxdisplay : none }。ui-menu-cont Li { width :119 px；高度：30 px线高：30 px背景# 168db8border-top:1px实心# fff}。用户界面-菜单-续阿利{}。t-nav a { color : # fff；font-size :14 px}.t-nav a :悬停{ color : # fff文本修饰：下划线；}/style/head dydiv class=' t-nav ' style=' margin-top :20 px；'ul class=' m-nav ' Li class=' g-fl ui-item ' a href=' # # # '网站首页/a/Li Li class=' g-fl ui-item ' a href=' # # # # # '导航内容/a/Li Li class=' g-fl ui-menu ' a href=' # # # # # '导航内容/a ul class=' ui-menu-cont ' lia href=' # # # ## '列表内容/a/li lia列表内容/a/li lia列表内容/a/li lia列表内容/a/li lia列表内容/a/Li/ul/Li Li class=' g-fl ui-menu ' a href=' # # # '导航内容/a ul class=' ui-menu-cont ' lia href=' # # # # # '列表内容/a/li lia列表内容/a/li lia列表内容/a/li lia列表内容/a/li lia列表内容/a/Li/ul/Li Li class=' g-fl ui-menu ' a href=' # # # '导航内容/a ul class=' ui-menu-cont ' lia href=' # # # ## '列表内容/a/li lia列表内容/a/li lia列表内容/a/li lia列表内容/a/li lia列表内容/a/Li/ul/Li Li class=' g-fl ui-menu ' a href=' # # # '导航内容/a ul class=' ui-menu-cont ' lia href=' # # # # # '列表内容/a/li lia列表内容/a/li lia列表内容/a/li lia列表内容/a/li lia列表内容/a/Li/ul/Li Li class=' g-fl ui-menu ' a href=' # # # '导航内容/a ul class=' ui-menu-cont ' lia href=' # # # ## '列表内容/a/li lia列表内容/a/li lia列表内容/a/li lia列表内容/a/li lia列表内容/a/Li/ul/Li Li class=' g-fl ui-item ' a href=' # # # '导航内容/a/Li Li class=' g-fl ui-item ' a href=' # # # # # '导航内容/a/Li/ul/div脚本类型=' text/JavaScript ' src=' http : js/jquery-1。 10 .1 .量滴js '/script脚本类型=' text/JavaScript ' $(' .用户界面菜单').悬停(function() { if($(this)).查找('里').长度0){ $(this).儿童(' ul ').停止（真，真)。slideDown(100) }}，function() { $(this).儿童(' ul ').停止（真，真)。向上滑动("快速");});/脚本/正文/html效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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