这是一款基于jQuery实现的标准型二级菜单，是漂亮的灰-蓝风格下拉级联菜单，代码经过了完美修正，目前兼容性已经很不错了，甚至不用修改，拷贝代码你就可以用了。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
<!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=utf-8" /> <title>jQuery标准型二级菜单</title> <script type="text/javascript" src="https://www.jb51.net/jquery-1.6.2.min.js"></script> <style type="text/css"> body { margin:0; padding:0; font-size:12px; } a:link { color:#1553a9; text-decoration: none; } a:visited { text-decoration:none; color: #1553a9; } a:hover { text-decoration:none; color: #f46662; } a:active { text-decoration: none; color:#f46662; } #main { width:910px; margin:0 auto; } #menu { margin-top:20px; position:absolute; } .m1 { float:left; width:100px; text-align:center; color:#3a3a3a; background-color:#bcbcbc; border:#9a9b9b 1px solid; border-right:0; padding:10px; padding-top:13px; cursor:pointer; } .m1:hover { background-color:#2c85e0; color:White; } .m2 { position:absolute; margin-top:39px; width:120px; background-color:#e4e4e4;border:#cdcece 1px solid;color:#666666; display:none; } .m2 table { width:100%; line-height:35px; } .m2 table tr td { text-align:center; border-top:#b4b4b4 1px dotted; cursor:pointer; } </style> <script type="text/javascript"> $(function(){ $(".m1").mouseover(function(){ $(this).parent().next(".m2").fadeIn(); }).mouseout(function(){ $(this).parent().next(".m2").css("display","none"); }); $(".m2").mouseover(function(){ $(this).css("display","block"); $(this).prev().children().css("background-color","#2c85e0").css("color","White");; }).mouseout(function(){ $(this).css("display","none"); $(this).prev().children().css("background-color","#bcbcbc").css("color","#3a3a3a"); }); }); </script> </head> <body> <div> <div> <a href="#" target="_blank"><span>论坛首页</span></a> <a href="#" target="_blank"><span>学生工作</span></a> <div><table> <tr><td><a href="#" target="_blank">学院首页</a></td></tr> <tr><td><a href="#" target="_blank">学院首页</a></td></tr> <tr><td><a href="#" target="_blank">学院首页</a></td></tr> </table></div> <a href="#" target="_blank"><span>师资队伍</span></a> <div><table> <tr><td><a href="#" target="_blank">学院首页</a></td></tr> <tr><td><a href="#" target="_blank">学院首页</a></td></tr> <tr><td><a href="#" target="_blank">学院首页</a></td></tr> </table></div> <a href="#" target="_blank"><span>学科专业</span></a> <div><table> <tr><td><a href="#" target="_blank">本科专业</a></td></tr> <tr><td><a href="#" target="_blank">硕士专业</a></td></tr> <tr><td><a href="#" target="_blank">博士专业</a></td></tr> </table></div> <a href="#" target="_blank"><span>教学改革</span></a> <div><table> <tr><td><a href="#" target="_blank">教学体制</a></td></tr> <tr><td><a href="#" target="_blank">学院首页</a></td></tr> <tr><td><a href="#" target="_blank">科研教学</a></td></tr> </table></div> <a href="#" target="_blank"><span>党建工作</span></a> <div><table> <tr><td><a href="#" target="_blank">学生党建</a></td></tr> <tr><td><a href="#" target="_blank">学院党建</a></td></tr> </table></div> <a href="#" target="_blank"><span>联系我们</span></a> <div><table> <tr><td><a href="#" target="_blank">老师电话</a></td></tr> <tr><td><a href="#" target="_blank">领导传真</a></td></tr> <tr><td><a href="#" target="_blank">学校地址</a></td></tr> <tr><td><a href="#" target="_blank">卫星地图</a></td></tr> </table></div> </div> </div> </body> </html>