jquery实现了鼠标滑动显示二级下拉菜单的效果

本文的一个例子说明了jquery通过鼠标滑动显示二级下拉菜单的效果。分享给大家参考。具体如下：

这是一个由jquery实现的下拉菜单。当鼠标在主菜单上移动时，它会滑下第二级子菜单。采用UL LI结构，易于修改和完善。我认为这是一份非常实用的菜单。希望大家平时都能用。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-鼠标悬停-显示-菜单-代码/

具体代码如下：

！DOCTYPE html heart heta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8' /titlejquery下拉菜单/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/脚本样式* { margin : 0；padd : 0；}body {font-family: Arial，Tahoma，sans-serif；font-size : 11pxcolor: # 232323}。包装{ width : 800 pxmargin : 0 auto } # nav { margin : 0；padd : 0；列表样式：无；边框-左侧： 1px实心# d5dce8border-right: 1px实心# d5dce8border-bottom: 1px实心# d5dce8边框-底部-左侧-半径： 4px-moz-border-radius-左下角： 4px-web套件-边框-左下-半径： 4px边框-底部-右侧-半径： 4px-moz-边界-半径-右下角： 4px-web套件-边框-底部-右侧-半径： 4px高度： 50px左衬垫左侧： 15px填充-右侧： 15px背景： # edf3f7}#nav li {左侧浮动：显示器：块；背景：无；相对位置：z指数： 999；margin: 0 1px}#nav阿利{ display : block padd : 0；字体粗细： 700；线高： 50px文本装饰：无；color : # 818 ba 3 zoom : 1；边框-左侧： 1px实心透明；右边框： 1px实心透明；padd : 0px 12px } #nav Li a : hover，# nav阿利. hov {底色： # fff边框-左侧： 1px实心# d5dce8border-right: 1px实心# D5 DCE 8 color : # 576482 } # nav ul { position : absolute eleft : 1pxdisplay :无；保证金： 0；padd : 0；列表样式：无；-moz-box-shadow : 0 1px 3px rgba(0，0，0，0.2)；-o-box-shadow : 0 1px 3px rgba(0，0，0，0.2)；box-shadow: 0 1px 3px rgba(0，0，0，0.2)；-web kit-box-shadow : 0 1px 3px rgba(0，0，0，0.2)；填充-底部： 3px} # nav ul li {宽度： 180px向左浮动：边框-top: 1px实心# fff文本-左对齐：} # nav ul Li :悬停{边框-左侧： 0px实心透明；右边框： 0px实心透明；} # nav ul a { display : block height : 20px线高： 20pxpadd : 8px 5pxcolor : # 666 border-bottom : 1px实心透明；文本转换：大写；颜色： # 797979font-weight:正常；} # nav ul a :悬停{ text-decoration : none边框-右侧-颜色：透明；边框-左侧-颜色：透明；背景：透明；color : # 4e4e } * html # nav ul { margin : 0 0-2px；} .clearfix:after在{ content:'之后。显示器：块；clear:两者；可见性：隐藏；线高： 0;高度： 0;}.clearfix { display:内联块；}html[xmlns].clearfix { display:块；}* html .清除固定{高度：1%；}/style/head dydiv class=' wrap ' ul id=' nav ' lia href=' # '网站主页/a/li lia href='# '关于我/a ul lia href='# '公司/a/li lia href='# '作者/a/li lia href='# '广告/a/li /ul /li lia订阅/a ul lia href=' # ' PSD/a/Li lia href=' # '模式/a/Li lia href=' # '图标/a/li /ul /li lia href='# '精美博文/a ul lia href=' # ' html 5/a/Li lia href=' # ' CSS3/a/Li lia href=' # jQuery/a/Li lia href=' # ' MySQL/a/Li/ul/Li lia href=' # ' Web工具/a ul lia href='# '性能/a/li lia href='#'CMS插件/a/li lia href='# '备忘单/a/li /ul /li lia href='# '原件/a ul lia href='# '网站设计/a/Li lia href=' # ' Mobile/a/Li/ul/Li/ul/div脚本类型=' text/JavaScript ' $(文档)。 就绪(函数(){ $('#nav li ')).悬停(function() { $('ul '，this).向下滑动(200);$(这个)。儿童(' a:first ').addCLaSS(' hov ')；}，function() { $('ul '，this).向上滑动(100);$(这个)。儿童(' a:first ').移除CLaSS(' hov ')；});});/脚本/正文/html希望本文所述对大家的jquery程序设计有所帮助。