滑动的层做的动态菜单，推荐！

特效说明：

把下列代码加到网页的<Body></Body>标签之间

<HTML>
<HEAD>
<TITLE>动态菜单</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
a{color: #333333; text-decoration: none}
a:hover{color: #990000; text-decoration: underline}
.alpha {
	FILTER: Alpha(Opacity=80)
}
.td1 {
	FONT-SIZE: 12px; FONT-FAMILY: "tahoma"
}
.td2 {
	FONT-SIZE: 12px; CURSOR: hand; FONT-FAMILY: "tahoma"; BACKGROUND-COLOR: #cfe7ff
}
.maskl {
	OVERFLOW: hidden
}
.cardtitle {
	BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-SIZE: 12px; BORDER-LEFT: black 0px solid; CURSOR: default; TEXT-INDENT: 4pt; BORDER-BOTTOM: black 0px solid; FONT-FAMILY: "tahoma"
}
.cardbottom {
	BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; FILTER: Alpha(Opacity=90); BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #99ccff
}
</STYLE>
<SCRIPT language=Jscript>
//用数组来存储多个timeOut标识.
tBack=new Array(6);
tOut=new Array(6);
//激活当前选项卡.
function menuOut(whichMenu){
var curMenu=eval("menu"+whichMenu);
	curMenu.runtimeStyle.zIndex=6;
	clearTimeout(tBack[whichMenu]);
	moveOut(whichMenu);
}
//恢复初始状态.
function menuBack(whichMenu){
var curMenu=eval("menu"+whichMenu);
	curMenu.runtimeStyle.zIndex=curMenu.style.zIndex;
	clearTimeout(tOut[whichMenu]);
	moveBack(whichMenu);
}
//移动当前选项卡
function moveOut(curNum){
var	curMenu=eval("menu"+curNum);
	if(curMenu.style.posLeft>0) {
		curMenu.style.posLeft-=2;
		tOut[curNum]=setTimeout("moveOut('"+curNum+"')",1);
		}
}
//移回选项卡.
function moveBack(curNum){
var	curMenu=eval("menu"+curNum);
	if(curMenu.style.posLeft<30) {
		curMenu.style.posLeft+=2;
		tBack[curNum]=setTimeout("moveBack('"+curNum+"')",1);
		}

}
//鼠标移过时改变表格单元式样。
function swapClass(){
var o=event.srcElement;
	if(o.className=="td1") o.className="td2"
		else if(o.className=="td2") o.className="td1";
}
document.onmouseover=swapClass;
document.onmouseout=swapClass;
</SCRIPT>
</HEAD>
<BODY text=#000000 bgColor=#ffffff leftMargin=0 topMargin=0 marginwidth="0" marginheight="0">
<DIV class=maskl id=menuPos style="Z-INDEX: 1; LEFT: 12px; WIDTH: 132px; POSITION: absolute; TOP: 14px; HEIGHT: 256px">

<DIV id=menu1 onmouseover=menuOut(1) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 0px; HEIGHT: 20px" onmouseout=menuBack(1)>
<DIV class=cardbottom id=Layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>option1</TD></TR>
  <TR>
    <TD class=td1 align=middle>option2</TD></TR>
  <TR>
    <TD class=td1 align=middle>option3</TD></TR>
  <TR>
    <TD class=td1 align=middle>option4</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE>
</DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><IMG height=18 src="stang.gif" 
      width=14></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff height=14>menucard1</TD></TR></TBODY></TABLE>
</DIV>

<DIV id=menu3 onmouseover=menuOut(3) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 40px; HEIGHT: 20px" onmouseout=menuBack(3)>
<DIV class=cardbottom id=Layer3 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>option1</TD></TR>
  <TR>
    <TD class=td1 align=middle>option2</TD></TR>
  <TR>
    <TD class=td1 align=middle>option3</TD></TR>
  <TR>
    <TD class=td1 align=middle>option4</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><IMG height=18 src="stang.gif" 
      width=14></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff 
  height=14>MENUCARD3</TD></TR></TBODY></TABLE>
 </DIV>

<DIV id=menu4 onmouseover=menuOut(4) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 60px; HEIGHT: 20px" onmouseout=menuBack(4)>
<DIV class=cardbottom id=Layer4 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>option1</TD></TR>
  <TR>
    <TD class=td1 align=middle>option2</TD></TR>
  <TR>
    <TD class=td1 align=middle>option3</TD></TR>
  <TR>
    <TD class=td1 align=middle>option4</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><IMG height=18 src="stang.gif" width=14></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff height=14>MENUCARD4</TD>
  </TR>
  </TBODY>
</TABLE>
</DIV>

<DIV id=menu5 onmouseover=menuOut(5) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 80px; HEIGHT: 134px" onmouseout=menuBack(5)>
<DIV class=cardbottom id=Layer5 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>option1</TD></TR>
  <TR>
    <TD class=td1 align=middle>option2</TD></TR>
  <TR>
    <TD class=td1 align=middle>option3</TD></TR>
  <TR>
    <TD class=td1 align=middle>option4</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><IMG height=18 src="stang.gif" 
      width=14></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff 
  height=14>MENUCARD5</TD></TR></TBODY></TABLE>
</DIV>
  
<DIV id=menu6 onmouseover=menuOut(6) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 100px; HEIGHT: 134px" onmouseout=menuBack(6)>
<DIV class=cardbottom id=Layer6 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>option1</TD></TR>
  <TR>
    <TD class=td1 align=middle>option2</TD></TR>
  <TR>
    <TD class=td1 align=middle>option3</TD></TR>
  <TR>
    <TD class=td1 align=middle>option4</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><IMG height=18 src="stang.gif" 
      width=14></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff 
  height=14>MENUCARD6</TD></TR></TBODY></TABLE>
  </DIV>  
<DIV id=menu7 onmouseover=menuOut(7) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 120px; HEIGHT: 134px" onmouseout=menuBack(7)>
<DIV class=cardbottom id=Layer7 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>option1</TD></TR>
  <TR>
    <TD class=td1 align=middle>option2</TD></TR>
  <TR>
    <TD class=td1 align=middle>option3</TD></TR>
  <TR>
    <TD class=td1 align=middle>option4</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><IMG height=18 src="stang.gif" 
      width=14></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff 
  height=14>MENUCARD7</TD></TR></TBODY></TABLE>
  </DIV>  
</DIV>  
<table width="100%"  border="0" cellpadding="0" cellspacing="0" class="downxian">
  <tr>
    <td></td>
  </tr>
</table><table width="1004"  border="0" cellpadding="0" cellspacing="0" class="downse">
  <tr>
    <td width="420" align="center"><span class="style1">© CopyRight 2002-2005 ZZNJ.com, Inc. All Rights Reserved</span></td>
    <td width="163" align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="163" height="64">
      <param name="movie" value="../flash/down.swf">
      <param name=quality value=high>
	  <param name="wmode" value="transparent">
      <embed src="../flash/down.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="163" height="64"></embed>
    </object></td>
    <td align="center"><span class="style1">Email: skyzznj@126.com</span><div style="display: none"><script src='http://s17.cnzz.com/stat.php?id=153371&web_id=153371&show=pic' language='JavaScript' charset='gb2312'></script></div></td>
  </tr>
</table></body>
</html>