zoukankan      html  css  js  c++  java
  • 一个简单的两级菜单效果


    <!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- 1px;
        border-right- 1px;
        border-bottom- 1px;
        border-left- 1px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid; 
        background-color: #f5f5f5;
        z-index:10;
        60%;
        vertical-align:top;
        position:absolute;
        filter:alpha(opacity=100);
       }
       .CMenuTD
       {
        background-color: #E9EDF9;
        border-right- 1px;
        border-right-style: solid;
        border-right-color: #A2A9B2;
        border-top-style: none; 
        border-bottom-style: none; 
        border-left- 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 >部门职责&nbsp;&nbsp;</a></td>
       </tr>
      
       <tr>
        <td align="left">    
        <a >工作动态&nbsp;&nbsp;</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 >会议纪要&nbsp;&nbsp;</a></td>
       </tr>
      
       <tr>
        <td align="left">
       
        <a >专题总结&nbsp;&nbsp;</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>

  • 相关阅读:
    [NOTE]常用Linux命令总结[Thx for commandlinefu]
    [原]隧道Proxy原理详解(基于Node.js)
    [转]MySQL索引详解(1)
    [QA]服务端进程模型
    [转]MySQL索引详解(2)
    非动态规划实现LCS算法
    Java里线程安全的有界容器的实现
    maven历史版本下载
    JDK9下载
    maven排除依赖和添加本地依赖
  • 原文地址:https://www.cnblogs.com/snlfq2000/p/1201164.html
Copyright © 2011-2022 走看看