一个很经典的下拉式菜单（附效果）

 核心函数代码:

<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>

示例使用代码：

 

Code


<table width="100%" border="0" cellpadding="0" cellspacing="0" id="menu">
  <tr>
    <td width="100" height="22"><a href="index.htm">首页</a></td>
    <td width="100"><a href="#" onmouseover="MM_showHideLayers('show','','show')" onmouseout="MM_showHideLayers('show','','hide')">走进星火</a></td>
 <td width="100"><a href="#" onmouseover="MM_showHideLayers('products','','show')" onmouseout="MM_showHideLayers('products','','hide')">产品中心</a></td>
    <td width="100"><a href="#" onmouseover="MM_showHideLayers('solution','','show')" onmouseout="MM_showHideLayers('solution','','hide')">解决方案</a></td>
  <td width="100"><a href="#" onmouseover="MM_showHideLayers('example','','show')" onmouseout="MM_showHideLayers('example','','hide')">成功案例</a></td>
    <td width="100"><a href="#" onmouseover="MM_showHideLayers('services','','show')" onmouseout="MM_showHideLayers('services','','hide')">客户服务</a></td>
  <td width="100"><a href="#" onmouseover="MM_showHideLayers('service','','show')" onmouseout="MM_showHideLayers('service','','hide')">工作机会</a></td>
    <td width="100"><a href="#" onmouseover="MM_showHideLayers('buy','','show')" onmouseout="MM_showHideLayers('buy','','hide')">联系购买</a></td>
 <td width="100"><a href="job/job.htm">公司招聘</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="1" colspan="7">
 <div id="show" onmouseover="MM_showHideLayers('show','','show')" onmouseout="MM_showHideLayers('show','','hide')">
      <table width="100%" border="0" cellpadding="0" cellspacing="1" id="float3">
        <tr style="margin-left:10">
          <td align="left"><a href="product/profile.htm">公司介绍</a></td>

        </tr>
        <tr>
          <td align="left"><a href="product/hardware.htm">企业文化</a></td>
        </tr>
        <tr>
          <td align="left"><a href="product/advantage.htm">优势介绍</a></td>
        </tr>
        <tr>
          <td><a href="product/case.htm">联系我们</a></td>
        </tr>
      </table>
    </div>
  <div id="products" onmouseover="MM_showHideLayers('products','','show')" onmouseout="MM_showHideLayers('products','','hide')">
      <table width="100%" border="0" cellpadding="0" cellspacing="1" id="float">
        <tr>
          <td><a href="products/products1.htm">产品介绍</a></td>
        </tr>
        <tr>
          <td><a href="products/products2.htm">系统优势</a></td>
        </tr>
      
      </table>
    </div>
 <div id="solution" onmouseover="MM_showHideLayers('solution','','show')" onmouseout="MM_showHideLayers('solution','','hide')">
      <table width="100%" border="0" cellpadding="0" cellspacing="1" id="float">
        <tr>
          <td><a href="solution/solution1.htm">小型企业解决方案</a></td>
        </tr>
        <tr>
          <td><a href="solution/solution2.htm">中型企业解决方案</a></td>
        </tr>
        <tr>
          <td><a href="solution/solution3.htm">大型企业解决方案</a></td>
        </tr>
        <tr>
          <td><a href="solution/faq.htm">解决方案常见问题</a></td>
        </tr>
      </table>
    </div>
  <div id="example" onmouseover="MM_showHideLayers('example','','show')" onmouseout="MM_showHideLayers('example','','hide')">
      <table width="100%" border="0" cellpadding="0" cellspacing="1" id="float">
        <tr>
          <td><a href="example/example1.htm">成功案例LOGO集</a></td>
        </tr>
        <tr>
          <td><a href="example/example2.htm">典型案例</a></td>
        </tr>
   
      </table>
    </div>
  <div id="services" onmouseover="MM_showHideLayers('services','','show')" onmouseout="MM_showHideLayers('services','','hide')">
      <table width="100%" border="0" cellpadding="0" cellspacing="1" id="float">
              <tr>
          <td><a href="service/standard.htm">客户服务</a></td>
        </tr>
     <tr>
          <td><a href="product/profile.htm" onmouseover="MM_showHideLayers('services1','','show')" onmouseout="MM_showHideLayers('services1','','hide')">增值服务<img src="images/arrow2.gif" style="border:none"/></a></td>
        </tr>
    <tr>
          <td><a href="service/standard.htm">下载中心</a></td>
        </tr>

   
      </table>
    </div>

 <div id="buy" onmouseover="MM_showHideLayers('buy','','show')" onmouseout="MM_showHideLayers('buy','','hide')">
      <table width="100%" border="0" cellpadding="0" cellspacing="1" id="float">
        <tr>
          <td><a href="about/buy.htm">联系购买</a></td>
        </tr>
        <tr>
          <td><a href="about/contact.htm">联系我们</a></td>
        </tr>
      </table>
    </div>
 <div id="about" onmouseover="MM_showHideLayers('about','','show')" onmouseout="MM_showHideLayers('about','','hide')">
      <table width="100%" border="0" cellpadding="0" cellspacing="1" id="float">
        <tr>
          <td><a href="about/about.htm">公司简介</a></td>
        </tr>
      </table>
    </div>
 <div id="services1" onmouseover="MM_showHideLayers('services1','','show')" onmouseout="MM_showHideLayers('services1','','hide')">
      <table width="100%" border="0" cellpadding="0" cellspacing="1" id="float">
        <tr>
          <td><a href="service/pro-system.htm" onmouseover="MM_showHideLayers('services','','show')"  onmouseout="MM_showHideLayers('services','','hide')">项目规划</a></td>
        </tr>
    <tr>
          <td><a href="service/pro-hr.htm" onmouseover="MM_showHideLayers('services','','show')"  onmouseout="MM_showHideLayers('services','','hide')">项目实施</a></td>
        </tr>
   <tr>
          <td><a href="service/pro-cash.htm" onmouseover="MM_showHideLayers('services','','show')"  onmouseout="MM_showHideLayers('services','','hide')">售后服务</a></td>
        </tr>
  <tr>
          <td><a href="service/pro-attendance.htm" onmouseover="MM_showHideLayers('services','','show')"  onmouseout="MM_showHideLayers('services','','hide')">管理咨询</a></td>
        </tr>
      </table>
 </div> 
 
 </td>
 <!--td bgcolor="#2959A3"></td-->
  </tr>
</table>

 

本来准备上传一个示例文件，结果不行，想看效果的，自己建一个吧，哈哈

 

 

转载于:https://www.cnblogs.com/yhb199/archive/2009/02/17/1392629.html