关于js特效，能够锁定的那种导航边框层（右侧或左侧）

那种树形的导航，在左侧或者右侧，鼠标移上去就能显示，拿开去就隐藏，上面还有个“lock”锁定的按钮，可以锁定在边框上，不知道哪位高人能不能指导指导，顺便我这边有几个，因为要做这种效果，但是层一直是闪啊闪的，我解决了两天也不行，气死我了，希望哪位大侠能够帮忙修改下

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我做的效果，下载地址是这个：http://www.rayfile.com/files/c6e6d647-6e2a-11df-aeb4-0015c55db73d/
郁闷，不能上传附件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>  <style type="text/css">
  .txtBox {
cursor:hand;
background-color:red;
color: #FFFFFF
  }
  .textBox {
background-color:#ACACAC;
color:#000000;
  }  .textLogin {
border: 1 solid black;
width:100px;
  }
  A {
text-decoration:none;
color:blue;
  }  .txtTable {
border-bottom-width:1px;
border-left-width:1px;
border-right-width:1px;
border-top-width:1px;
border-color:#CC0066;
border-style:solid;
text-align:center;
  }
  </style>
  <SCRIPT LANGUAGE="JavaScript">
  
  </SCRIPT>
</HEAD> <BODY>
<form action="" method="post" name="inputForm">
<table cellpadding="1" cellspacing="1" width="100%"> <tr align="center" bgcolor="#ACACAC">

<td onmouseover="this.className='txtBox',showOpen('Guan'),showClose('Te','Zhao','Gong','Shi','Yan')" onmouseout="this.className='textBox'">关于中信</td>
<td onmouseover="this.className='txtBox'" onmouseout="this.className='textBox',showOpen('Gong'),showClose('Guan','Te','Zhao','Shi','Yan')">公司业务</td>
<td onmouseover="this.className='txtBox'" onmouseout="this.className='textBox',showOpen('Shi'),showClose('Gong','Te','Zhao','Guan','Yan')">公益事业</td>
<td onmouseover="this.className='txtBox'" onmouseout="this.className='textBox',showOpen('Yan'),showClose('Guan','Te','Zhao','Gong','Shi')">中信研究</td>
<td onmouseover="this.className='txtBox'" onmouseout="this.className='textBox',showOpen('Zhao'),showClose('Yan','Te','Gong','Shi','Yan')">推荐中信</td>
<td onmouseover="this.className='txtBox'" onmouseout="this.className='textBox',showOpen('Te'),showClose('Zhao','Gong','Shi','Yan','Guan')">特色推荐</td>
</tr>
<tr >

<td>
<div id="advGuan" style="position:absolute;top:40px;display:none;z-index:1;">
<table width="100%" cellpadding="1" cellspacing="1">
<tr bgcolor="#ACACAC" >
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">中信介绍</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">中信地址</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">中信业务</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">中信规模</td>
</tr>
<tr bgcolor="#ACACAC" >
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">中信客户</td>
</tr>
</table>
</div>
</td> <td >
<div id="advGong" style="position:absolute;top:40px;display:none;z-index:1;">
<table width="100%" cellpadding="1" cellspacing="1">
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">软件开发</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">软件测试</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">硬件开发</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">硬件测试</td>
</tr>
</table >
</div>
</td> <td >
<div id="advShi" style="position:absolute;top:40px;display:none;z-index:1;">
<table  width="100%" cellpadding="1" cellspacing="1">
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">奖学金</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">支持西部发展</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">热心帮助</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">帮助中心</td>
</tr>
</table>
</div>
</td> <td >
<div id="advYan" style="position:absolute;top:40px;display:none;z-index:1;">
<table width="100%" cellpadding="1" cellspacing="1">
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">科学研究</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">科研考察</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">软件研究</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">硬件研究</td>
</tr>
</table>
</div>
</td> <td >
<div id="advZhao" style="position:absolute;top:40px;display:none;z-index:1;">
<table width="100%" cellpadding="1" cellspacing="1">
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">中信软件</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">中信硬件</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">中信学院</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">中信学术</td>
</tr>
</table>
</div>
</td> <td>
<div id="advTe" style="position:absolute;top:40px;display:none;z-index:1;">
<table width="100%" cellpadding="1" cellspacing="1">
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">网络金融</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">中信出版</td>
</tr>
<tr bgcolor="#ACACAC">
<td align="center" onmouseover="this.className='txtBox'" onmouseout="this.className='textBox'">会展服务</td>
</tr>
</table>
</div>
</td>
</tr>
</table><table onmouseout="showCloses('Guan','Te','Zhao','Gong','Shi','Yan')" width="100%" height="100%" border="1">
<tr  width="100%" height="100%">

<td width="100%" height="100%">bfh</td>
</tr>

</table>
</form>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
<STYLE type="text/css">
DIV {
FONT-SIZE: 13px;
COLOR: #000000;
LINE-HEIGHT: 22px;
}
A {
FONT-SIZE: 13px;
COLOR: #000000;
TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 13px;
COLOR: #999999
}
</STYLE>
<SCRIPT language="JavaScript">
function show(d1){
if(document.getElementById(d1).style.display=='none'){
document.getElementById(d1).style.display='block'; //触动的层如果处于隐藏状态，即显示
} else {
document.getElementById(d1).style.display='none'; //触动的层如果处于显示状态，即隐藏
}
}
</SCRIPT>
</HEAD> <BODY>
<DIV HEIGHT="30"><FONT color="#CC0000" ><B>树形菜单：</B></FONT></DIV>
<A href="javascript:onClick=show('1') ">文学艺术</A>
<DIV id="1" style="display:none">先锋写作<BR>
小说散文<BR>
诗风词韵</DIV>
<DIV><A href="javascript: onClick=show('2') ">贴图专区</A></DIV>
<DIV id="2" style="display:none">真我风采<BR>
视频贴图<BR>
行行摄摄<BR>
Flash贴图
</DIV>
</BODY>
</HTML>