本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码。分享给大家供大家参考。具体如下：
这里介绍的是一款黑红带渐变的网站下滑导航菜单，基于jquery实现的下滑线导航菜单，鼠标经过主菜单的时候，下滑线就会自动跟向哪里，如果该菜单有两级子菜单，则同样会显示下滑菜单，带渐变效果。菜单操作很灵敏，使用有自定义的封装插件SuperSlide.2.1.js，所在使用时请自行下载这个JS插件。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-mouse-over-buttom-line-show-menu-codes/
具体代码如下：
jQuery带下划线导航菜单 *{margin: 0;padding: 0;list-style: none;} body{background: #fff;font-size: 12px;} img{border: 0;} a{text-decoration: none;color: #333;} a: hover{color: #FF8400;} .clearfix: after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix10: after{content: ".";display: block;height: 10px;clear: both;visibility: hidden;} .h10{height: 10px;} .h15{height: 15px;} #header{width: 1000px;margin: 0 auto;} .navBar{width: 1000px;margin: 0 auto;height: 50px;line-height: 50px;background: #000;color: #333;} .nav{position: relative;width: 980px;margin: 0 auto;font-family: "Microsoft YaHei",SimSun,SimHei;font-size: 14px;} .nav a{color: #fff;} .nav h3{font-size: 100%;font-weight: normal;} .nav .m{float: left;position: relative;z-index: 1;} .nav .s{float: left;width: 3px;text-align: center;color: #D4D4D4;font-size: 12px;} .nav h3 a{display: block;width: 115px;text-align: center;font-weight: bold;} .nav .sub{display: none;position: absolute;left: -3px;top: 50px;z-index: 1;width: 117px;border: 1px solid #E6E4E3;border-top: 0;background: #fff;} .nav .sub li{text-align: center;padding: 0 8px;margin-bottom: -1px;} .nav .sub li a{display: block;border-bottom: 1px solid #E6E4E3;padding: 8px 0;height: 28px;line-height: 28px;color: #000;font-size: 12px;font-weight: bold;} .nav .sub li a: hover{color: #FE7700;} .nav .block{height: 8px;width: 120px;background: #FE7700;position: absolute;left: 0;top: 42px;overflow: hidden;}
希望本文所述对大家的jquery程序设计有所帮助。
