HTML下拉菜单实现-优快云博客

本文介绍了一种使用HTML和JavaScript实现的下拉菜单效果，包括菜单的显示与隐藏功能。通过具体的代码示例展示了如何设置菜单样式及交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
     
     <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>
     
    </td>
   </tr>
   <tr>
    <td align="left">
     
     <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>
     
    </td>
   </tr>

   <tr>
    <td align="left">

    <a >会议纪要  </a></td>
   </tr>

   <tr>
    <td align="left">

    <a >专题总结  </a></td>
   </tr>

   <tr>
    <td align="left">
     
     <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>
     
    </td>
   </tr>

  </table>
</td>
</tr>
</table>
</form>
</body>
</HTML>