js实现二级菜单渐隐显示

先给大家看一看最终的效果图：
下面就是js实现二级菜单渐隐显示的代码：
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><title>导航菜单二级菜单滑动渐隐显示</title><script type="text/javascript" src="js/jquery.js"></script><style type="text/css"> {margin: 0;padding: 0;list-style-type: none;}a, img{border: 0;}a, a:visited{color: #5e5e5e;text-decoration: none;}a:hover{color: #333;text-decoration: underline;}body{font: 12px/180% Arial,Lucida,Verdana, "宋体" ,Helvetica,sans-serif;color: #333;background: #fff;}/* navbox */.navbox, .nav li, .nav li.current a, .nav li.selected a span, .nav li a.selected, .nav li a.selected span{background: url（images/headerbg.png） no-repeat;}.navbox{height:39px;background-position:0 -138px;background-repeat:repeat-x;position: relative;z-index:9; }.nav{width: 960px;margin: 0 auto;}.nav li{float: left;height: 39px;background-position: 100% -99px;padding: 0 3px 0 2px;position: relative;}.nav li.last{background: none;}.nav li a{float: left;display: block;padding: 0 0 0 4px;height: 39px;overflow: hidden;}.nav li a span{float: left;display: block;padding: 0 4px 0 0;line-height: 39px;font-size: 14px;color: #fff;font-weight: 800;cursor: pointer;width: 142px;text-align: center;}.nav li.selected a, .nav li a.selected{background-position: 0 -60px;text-decoration: none;}.nav li.selected a span, .nav li a.selected span{background-position: 100% -60px;color: #ff7e00;}.nav li.selected .submenu{display: block;}.nav li .submenu{display: none;position: absolute;top: 39px;left: 6px;}.nav li .submenu{border-style: solid;border-width: 0px 1px 1px 1px;border-color: #ddd;padding: 0 5px 5px 5px;width: 132px;background: #fff;}.nav li .submenu{-moz-border-radius: 0 0 3px 3px;-webkit-border-radius: 0 0 3px 3px;border-radius: 0 0 3px 3px;-moz-box-shadow: 0 5px 5px #D3D3D3;-webkit-box-shadow: 0 5px 5px #D3D3D3;box-shadow: 0 5px 5px #D3D3D3;}.nav li .submenu li{float: none;padding: 0;background: none;height:auto;border-bottom:dotted 1px #BEBEBE;}.nav li .submenu li.last{border: none;}.nav li .submenu li a{float:none;padding:0;text-align:center;height:28px;line-height:28px;background:none;}.nav li .submenu li a:hover{background:#ddd;font-weight:800; }</style></head><body><script type="text/javascript">function dropMenu（obj） {$（obj）.each（function （） {var theSpan = $（this）;var theMenu = theSpan.find（".submenu"）;var tarHeight = theMenu.height（）;theMenu.css（{ height: 0, opacity: 0 }）;theSpan.hover（function （） {$（this）.addClass（"selected"）;theMenu.stop（）.show（）.animate（{ height: tarHeight, opacity: 1 }, 400）;},function （） {$（this）.removeClass（"selected"）;theMenu.stop（）.animate（{ height: 0, opacity: 0 }, 400, function （） {$（this）.css（{ display: "none" }）;}）;}）; }）;} $（document）.ready（function （） {dropMenu（".drop-menu-effect"）;}）;</script><div class="navbox"><div class="nav"><ul class="clearfix"><li><a class="selected" target="_blank" href="javascript:void（0）;"><span>网站首页</span></a></li><li class="drop-menu-effect"><a target="_blank" href="javascript:void（0）;"><span>内容管理</span></a><ul class="submenu"><li><a href="#">普通文章</a></li><li><a href="#">专题文章</a></li><li><a href="#">材料文章</a></li></ul></li><li class="drop-menu-effect"><a target="_blank" href="javascript:void（0）;"><span>系统帮助</span></a><ul class="submenu"><li><a href="#">参考文档</a></li><li><a href="#">意见反馈</a></li><li><a href="#">官方交流论坛</a></li></ul></li></ul></div></div></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助。