本文描述了基于jQuery的下拉二级菜单的效果代码。分享给大家参考。具体如下：

这是jQuery制作的下拉二级菜单。这个二级菜单是动画和平滑的。鼠标放在主菜单上，可以向下滑动副菜单，比较实用。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-show-down-style-menu-codes/

具体代码如下：

！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向下滑动的二级菜单/title style type=' text/CSS ' body { margin :0 px；Helvetica阿里亚尔：0pxfont-family:无衬线；背景-color : # dede de；颜色： # 333333位置：相对；} a { text-decoration : none}h1、h2、h3、li、ul、dd、dt、dl、输入{ margin :0 pxpadding :0 pxlist-style : none；}.清除{ clear:both宽度：0 px高度：0像素线高：0 px飞越：隐藏；font-size :0 px显示：块；} img { border: none}。顶部{宽度：890像素高度：68 px余量：0px汽车；padding:10px 0px 2px 0px背景-color : # FFFFFF；}.徽标{宽度：269像素高度：68 pxpadd :0 px 8px 0px 3px float 3360 left }。徽标h1 {宽度：269px高度：68 px背景-图像： URL(图像/徽标。gif)；背景-重复：不重复；}.徽标h1 a { display:block宽度宽度：269像素高度：68 px线高：68 pxfont-size :14 px文本缩进：-999像素；}.topad { width:610px高度：68 pxfloat:left}。dh { width:890px高度：39 px余量：0px汽车；背景图像： URL(images/nvabg。gif)；背景-重复：次重复-x；}.nav { width:785px高度：38 pxpadd :1 px 0px 0px 15pxfloat 3360 left }。导航li { height:38px行高：38 pxfloat : left font-size :14 px；padd :0 px 20pxcolor : # FFFFFF位置：相对；}.阿利号}.导航阿利：悬停{文本装饰：下划线；font-size :16 px}.李导航ttg { height:auto背景-color : # FFFFFF；滤波器：(不透明度=80);opa city 3360 0.8-moz-opa city 3360 0.8；位置：绝对；左侧：0pxtop:37pxz索引：1;宽度宽度：150 pxpadding :10 px 0px-web套件-边框-半径：5 px-moz-边界-半径：5 px边界半径：5像素；盒影：2 px 2px 3px # 666666display:none}。李导航ttg li { width:120px线高：30 pxfont-size :16 pxpadding:0px 10px字体系列： '微软雅黑；}.李导航ttg .阿利{ color: # 000}。sc { width:90px高度：38 px行高：38 pxfloat : left font-size :14 px；color: # FFFFFF文本对齐：居中；}.sc a { color: # FFFFFF}。sc a :悬停{ text-decoration :下划线；}.ad { width :890 px h8 : auto margin :10 px汽车；}.ad img{ float:左侧；宽度宽度：445px飞越：隐藏；}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(')).李导航' .悬停(function(){ $(this)).查找('。ttg ').滑动切换(500);});});/script/head dydiv class=' top ' div class=' logo ' h1a href=' # ' title=' '网站标题文字/a/h1/div class=' topad '/div class=' clear '/div/div class=' DH ' div class=' nav ' ullia href=' # ' title='首页'首页/adiv class=' TTG ' ullia href=' # ' title='蛋白粉'蛋白粉/a/lilia href='#' title='健身计划'健身计划/a/lilia href='#' title='热门标签'热门标签/a/Li/ul/div/lilia 标题='蛋白粉'蛋白粉/adiv class=' TTG ' ullia href=' # ' title='蛋白粉'乳清蛋白粉/a/lilia href='#' title='热门标签'增肌粉/a/Li/ul/div/lilia健身计划'健身计划/adiv class=' TTG ' ullia href=' # ' title='蛋白粉'胸肌锻炼/a/lilia href='#' title='热门标签'小腿锻炼/a/lilia href='#' title='热门标签'腹肌锻炼/a/Li/ul/div/Li/ul/div class=' clear '/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。