一个简单的两级菜单效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title></title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style>
/*子菜单begin*/
.CSubMenu
{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-color: #f5f5f5;
z-index:10;
width:60%;
vertical-align:top;
position:absolute;
filter:alpha(opacity=100);
}
.CMenuTD
{
background-color: #E9EDF9;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #A2A9B2;
border-top-style: none;
border-bottom-style: none;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #03115c;
//padding-left:24px;
cursor:hand;
}
.CSubMenuItem
{FONT-SIZE:10pt;COLOR:#FFFFFF;FONT-WEIGHT:bold;TEXT-DECORATION:none;}
A.CSubMenuItem:link
{FONT-SIZE:10pt;COLOR:#000000;FONT-WEIGHT:normal;TEXT-DECORATION:none;}
A.CSubMenuItem:visited
{FONT-SIZE:10pt;COLOR:#000000;FONT-WEIGHT:normal;TEXT-DECORATION:none;}
A.CSubMenuItem:hover
{FONT-SIZE:11pt;COLOR:red;FONT-WEIGHT:normal;TEXT-DECORATION:none;}
/*子菜单end*/
</style>
<script type=text/javascript>
<!-- 显示菜单 -->
function MenuShow(id,leftnum)
{
var intleft=leftnum;
intleft = intleft-58;
//alert(intleft);
var ediv = document.all("d" + id);
var etr = document.all("tr" + id);
if (ediv.style.display == "none")
{
//ediv.style.color = "red";
ediv.style.display = "";
}
}
<!-- 隐藏菜单 -->
function MenuHide(id)
{
var ediv = document.all("d" + id);
var etr = document.all("tr" + id);
if (ediv.style.display != "none")
{
ediv.style.display = "none";
}
}
<!--鼠标移动到子菜单上-->
function MoIn(id,leftnum)
{
var intleft=leftnum;
if(intleft==null || intleft=="")
intleft=0;
MenuShow(id,intleft);
}
<!--鼠标移出到子菜单上-->
function MoOut(id)
{
MenuHide(id);
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout" >
<form name="Form1" method="post" action="WangZhanIndex.aspx?WangZhanBiaoShi=393" id="Form1">
<table width="94%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="center">
<table border="0" width="150" cellpadding="0" cellspacing="5">
<tr>
<td align="left">
<a >部门职责 </a></td>
</tr>
<tr>
<td align="left">
<a >工作动态 </a></td>
</tr>
<tr>
<td align="left">
<!--工作计划begin-->
<table width="100%" height="100%" border=0 cellspacing=0 cellpadding=0>
<tr >
<td align=left nowrap id="trlm_工作计划" onmouseover=MoIn('lm_工作计划') onmouseout=MoOut('lm_工作计划') >
<a >工作计划<font face='Webdings'>4</font></a>
</td> <td align="left" width="100%">
<table id=dlm_工作计划 style="display:none" onmouseover=MoIn('lm_工作计划') onmouseout=MoOut('lm_工作计划') class=CSubMenu border=0 align=center cellspacing=0 cellpadding=0>
<tr >
<td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
<a href="#" class="CSubMenuItem" >年度工作计划</a>
</td>
</tr>
<tr>
<td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
<a href="#" class="CSubMenuItem" >月度工作计划</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--工作计划end-->
</td>
</tr>
<tr>
<td align="left">
<!--工作计划begin-->
<table width="100%" height="100%" border=0 cellspacing=0 cellpadding=0>
<tr >
<td align=left nowrap id="trlm_工作总结" onmouseover=MoIn('lm_工作总结') onmouseout=MoOut('lm_工作总结') >
<a>工作总结<font face='Webdings'>4</font></a>
</td>
<td align="left" width="100%">
<table id=dlm_工作总结 style="display:none" onmouseover=MoIn('lm_工作总结') onmouseout=MoOut('lm_工作总结') class=CSubMenu border=0 align=center cellspacing=0 cellpadding=0>
<tr>
<td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
<a href="#" class="CSubMenuItem" >年度工作总结</a>
</td>
</tr>
<tr>
<td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
<a href="#" class="CSubMenuItem" >月度工作总结</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--工作计划end-->
</td>
</tr>
<tr>
<td align="left">
<a >会议纪要 </a></td>
</tr>
<tr>
<td align="left">
<a >专题总结 </a></td>
</tr>
<tr>
<td align="left">
<!--工作计划begin-->
<table width="100%" height="100%" border=0 cellspacing=0 cellpadding=0>
<tr >
<td align=left nowrap id="trlm_规章制度" onmouseover=MoIn('lm_规章制度') onmouseout=MoOut('lm_规章制度') >
<a >规章制度<font face='Webdings'>4</font></a>
</td>
<td align="left" width="100%">
<table id=dlm_规章制度 style="display:none" onmouseover=MoIn('lm_规章制度') onmouseout=MoOut('lm_规章制度') class=CSubMenu border=0 align=center cellspacing=0 cellpadding=0>
<tr>
<td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
<a href="#" class="CSubMenuItem" >部门规章制度</a>
</td>
</tr>
<tr>
<td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
<a href="#" class="CSubMenuItem" >国家相关法规</a>
</td>
</tr>
<tr>
<td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
<a href="#" class="CSubMenuItem" >集团规章制度</a>
</td>
</tr>
<tr>
<td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
<a href="#" class="CSubMenuItem" >总部规章制度</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--工作计划end-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</HTML>
