对于层叠样式的导航大家并不陌生，很多办公软件上都有见过，小弟仍因工作需要写了一个类似的导航，主要原理是采用层的优先级（即：style里面的z-index）来改变导航的选中状态，并且此导航考虑到有可能一个页面上会有多个这样的导航样式，于是并非通过id来获取任何对象，而是过去标签的嵌套关系来获取对象的，很有意思哦，看看下面的demo。
CODE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>一款很舒服的导航</title> <link type="text/css" rel="stylesheet" href="http://www.uideas.cn/download/20100325.css"> <script type="text/javascript" language="javascript" src="http://www.uideas.cn/download/20100325.js"></script> </head> <body> <table border="0" cellspacing="0" cellpadding="0" id="mainMenu"> <tr> <td width="10" class="mainMenuLeft"> </td> <td class="mainMenuCenter"> <div> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="clumMenuOn"><table border="0" cellspacing="0" cellpadding="0" class="cluMenuCov"> <tr> <td width="10" class="cluMenuLeft"> </td> <td class="cluMenuCenter" onClick="setCluMenu(this)"><a>网站首页</a></td> <td width="10" class="cluMenuRight"> </td> </tr> </table></td> <td class="clumMenuOut"><table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" class="cluMenuLeft"> </td> <td class="cluMenuCenter" onClick="setCluMenu(this)"><a>最新资讯</a></td> <td width="10" class="cluMenuRight"> </td> </tr> </table></td> <td class="clumMenuOut"><table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" class="cluMenuLeft"> </td> <td class="cluMenuCenter" onClick="setCluMenu(this)"><a>在线互动</a></td> <td width="10" class="cluMenuRight"> </td> </tr> </table></td> <td class="clumMenuOut"><table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" class="cluMenuLeft"> </td> <td class="cluMenuCenter" onClick="setCluMenu(this)"><a href="http://www.uideas.cn" target="_blank">友情链接</a></td> <td width="10" class="cluMenuRight"> </td> </tr> </table></td> </tr> </table> </div> </td> <td width="10" class="mainMenuRight"> </td> </tr> </table> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
相关下载： js下载地址:20100325.js css下载地址:20100325.css 图片下载地址:20100325.rar
