jQuery CSS实现的网页二级下滑菜单效果

本文实例讲述了jQuery CSS实现的网页二级下滑菜单效果。分享给大家供大家参考。具体如下：

这是一款简洁型的jQuery CSS网页二级下滑菜单，练手写的，有需要的自己拿去美化吧，基本的动画效果和菜单下滑效果和渐变效果已经做出来了，在工业管理学(工业工程)下表现不错，在火狐下发现菜单有闪烁现象，有空会继续修正，感谢大家捧场哦。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-CSS-web-二级-菜单-样式-代码/

具体代码如下：

！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 '标题CSS jQuery HTML二级下滑菜单/titlestyle type='text/css'body，ul，li，a { margin : 0；padd : 0；font:16px '微软雅黑；}ul，li{list-style-type: none} .菜单{宽度： 270像素重量： 30像素线高： 30px背景： #0f67a1} .菜单li {宽度： 120像素向左浮动：内联显示：相对位置：z指数： 10；文本对齐：中心；}.菜单li:悬停{ background: # 426d9c}。菜单menuUl { width : 120 pxh three :自动显示：无；背景技术# 426d9c绝对位置：z指数： 20;left : 25 xtop : 30pxpadding :3 px }。menuUl Li {宽度： 100%；向左浮动：文本-左对齐：} a { color: # eeetext-装饰：无}a:悬停{ color : # 000 text-decoration : none }/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function() { $(')).菜单李' .悬停(function() { $(this)).查找('。menuUl ').show(' 50 ')；}，function() { $(this).查找('。menuUl ').隐藏(' 50 ');});})/script/head dyul class=' menu ' lia href=' '源码类/a ul class='menuUl' lia href='# '论坛源码/a/li lia href='# '博客源码/a/li lia href='#' Ajax源码/a/li /ul/lilia特效类/a ul class='menuUl' lia href='# '导航菜单/a/li lia href='# '表单效果/a/li lia href='#' HTML5特效/a/li lia href='#' jQuery特效/a/li /ul/li/ul/body/html希望本文所述对大家的jquery程序设计有所帮助。