基于Div+CSS+JS的兼容Firefox树形菜单实现

<!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>Div+CSS+JS树型菜单，可刷新</title> <meta name="description" content="http://www.livepo.com"> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body {     font-family: arial, 宋体, serif;     font-size:12px; } #nav {     width:180px;     line-height: 24px;      list-style-type: none;     text-align:left;     /*定义整个ul菜单的行高和背景色*/ } /*==================一级目录===================*/ #nav a {     width: 160px;      display: block;     padding-left:20px;     /*Width(一定要)，否则下面的Li会变形*/ } #nav li {     background:#CCC; /*一级目录的背景色*/     border-bottom:#FFF 1px solid; /*下面的一条白边*/     float:left;     /*float：left,本不应该设置，但由于在Firefox不能正常显示     继承Nav的width,限制宽度，li自动向下延伸*/ } #nav li a:hover{     background:#CC0000;    /*一级目录onMouseOver显示的背景色*/ } #nav a:link  {     color:#666; text-decoration:none; } #nav a:visited  {     color:#666;text-decoration:none; } #nav a:hover  {     color:#FFF;text-decoration:none;font-weight:bold; } /*==================二级目录===================*/ #nav li ul {     list-style:none;     text-align:left; } #nav li ul li{         background: #EBEBEB; /*二级目录的背景色*/ } #nav li ul a{          padding-left:20px;          width:160px;     /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/ } /*下面是二级目录的链接样式*/ #nav li ul a:link  {     color:#666; text-decoration:none; } #nav li ul a:visited  {     color:#666;text-decoration:none; } #nav li ul a:hover {     color:#F3F3F3;     text-decoration:none;     font-weight:normal;     background:#CC0000;     /* 二级onmouseover的字体颜色、背景色*/ } /*==============================*/ #nav li:hover ul {     left: auto; } #nav li.sfhover ul {     left: auto; } #content {     clear: left;  } #nav ul.collapsed {     display: none; } --> #PARENT{     width:300px;     padding-left:20px; } </style> </head> <body> <div id="PARENT"> <ul id="nav"> <li>我的网站     <ul id="ChildMenu1" class="collapsed">     <li>[url]www.netany.net[/url]</li>     <li>[url]www.netany.net[/url]</li>     <li>[url]www.netany.net[/url]</li>     </ul> </li> <li>我的帐务     <ul id="ChildMenu2" class="collapsed">     支付</li>     <li>网上支付</li>     <li>登记汇款</li>     <li>在线招领</li>     <li>历史帐务</li>     </ul> </li> <li>网站管理     <ul id="ChildMenu3" class="collapsed">     <li>登录</li>     管理</li>     <li>管理</li>     <li>管理</li>     </ul> </li> <li>网站管理     <ul id="ChildMenu4" class="collapsed">     <li>登录</li>     管理</li>     <li>管理</li>     <li>管理</li>     </ul> </li> </ul> </div> <div style="width:300;padding-left:30px;"> </br></br> 工作需要搞了一个菜单，分享给大家，大家一齐学习 </br></br> <p>请大家支持:[url]http://www.netany.net[/url]</p> </div> </body> </html> 

注意：在引入外部JavaScript文件时，必须刷新页面才能确保脚本正确执行。