有关一个下拉菜单问题,完成后高分相送~~~

在 IE 的工具－internet选项－安全－自定义级别
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<style>
<!--
.menuover    { background-color: #EAF2FD; border: 1px solid #1A71E6; cursor: hand; }
.menuout     { cursor: hand; }
td,a         { color: #1A71E6; font-size: 12px; font-family: 宋体; text-decoration: none }
-->
</style>
<script>
var moveStep = 15; // 移动单位
var moveTime = 10; //移动时间function MoveMenuBox()
{
 if(MenuBox.doing)
 {
  clearInterval(MenuBox.doing)
 }
 
 moveStep *= -1
 
 MenuBox.doing = setInterval("DoMoveAction()",moveTime)
}
function DoMoveAction()
{
 var judger = MenuBox.style.pixelTop + moveStep;
 if(moveStep>0)
 {
  if(judger <= MenuBox.parentElement.offsetHeight)
  {
   MenuBox.style.pixelTop = judger
  }
  else
  {
   MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight;
   clearInterval(MenuBox.doing);
   MenuBox.doing = false;
  }
 }
 else
 {
  if(judger >= 0)
  {
   MenuBox.style.pixelTop = judger
  }
  else
  {
   MenuBox.style.pixelTop = 0;
   clearInterval(MenuBox.doing);
   MenuBox.doing = false;
  } 
 }
}
</script>  
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">  <tr>
    <td width="100%">
    
<table id="judgerBox" width=130 cellpadding="0" cellspacing="0" height="29">
            <tr>
              <td valign="middle" align="center" height="4" width="128" bgcolor="#FFFFFF" style="font-size: 6px">
              </td> 
            </tr> 
            <tr>
              <td onclick="MoveMenuBox()" valign="middle" align="center" height="25" style="cursor: hand; background-color: #1A71E6; color: #FFFFFF; border: 1 outset #FFFFFF" width="128">控 
                制 按 钮</td> 
            </tr> 
          </table>       
    </td>
  </tr>
    <tr>
    <td width="100%">
<div style="overflow: hidden; height:100%; width:100%">    
<table id="MenuBox" width=130 cellpadding="0" cellspacing="4" style="border: 1 solid #1A71E6;border-left: 20 solid #1A71E6; position: relative; visibility: hidden">
            <tr>
              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >关 于 我 们</td>
            </tr>
            <tr>
              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout';>加 入 我 们</td>
            </tr>
            <tr>
              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >交 易 市 场</td>
            </tr>
            <tr>
              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >网 页 超 市</td>
            </tr>
            <tr>
              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >域 名 注 册</td>
            </tr>
            <tr>
              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >虚 拟 主 机</td>
            </tr>
   <tr>
              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >服 务 中 心</td>
            </tr>
            <tr>
              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >合 作 伙 伴</td>
            </tr>
          </table>    
</div>    
    </td>
  </tr>
</table>
 
<script>
function window.onload()
{
 MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight;
 MenuBox.style.visibility = "visible"
}
</script>

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>New Page 1</title>
    <style>
    <!--
    .menuover    { background-color: #EAF2FD; border: 1px solid #1A71E6; cursor: hand; }
    .menuout     { cursor: hand; }
    td,a         { color: #1A71E6; font-size: 12px; font-family: 宋体; text-decoration: none }
    -->
    </style>
    <script>
    var moveStep = 15; // 移动单位
    var moveTime = 10; //移动时间function MoveMenuBox()
    {
     if(MenuBox.doing)
     {
      clearInterval(MenuBox.doing)
     }
     
     moveStep *= -1
     
     MenuBox.doing = setInterval("DoMoveAction()",moveTime)
    }
    function DoMoveAction()
    {
     //var judger = MenuBox.style.pixelTop + moveStep;
     var judger = MenuBox.style.pixelBottom + moveStep;
     if(moveStep>0)
     {
      //if(judger <= MenuBox.parentElement.offsetHeight)
      if(judger <= MenuBox.parentElement.offsetHeight)
      {
    //   MenuBox.style.pixelTop = judger
         MenuBox.style.pixelBottom = judger
      }
      else
      {
    //   MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight;
       MenuBox.style.pixelBottom = MenuBox.parentElement.offsetHeight;
       clearInterval(MenuBox.doing);
       MenuBox.doing = false;
      }
     }
     else
     {
      if(judger >= 0)
      {
    //   MenuBox.style.pixelTop = judger
       MenuBox.style.pixelBottom = judger
      }
      else
      {
    //   MenuBox.style.pixelTop = 0;
         MenuBox.style.pixelBottom = 0;
       clearInterval(MenuBox.doing);
       MenuBox.doing = false;
      } 
     }
    }
    </script>  
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0">  <tr>
        <td width="100%">
        
    <table id="judgerBox" width=130 cellpadding="0" cellspacing="0" height="29">
                <tr>
                  <td onclick="MoveMenuBox()" valign="middle" align="center" height="25" style="cursor: hand; background-color: #1A71E6; color: #FFFFFF; border: 1 outset #FFFFFF" width="128">控 
                    制 按 钮</td> 
                </tr> 
                <tr>
                  <td valign="middle" align="center" height="4" width="128" bgcolor="#FFFFFF" style="font-size: 6px">
                  </td> 
                </tr> 
              </table>       
        </td>
      </tr>
      <tr>
        <td width="100%">
    <div style="overflow: hidden; height:100%; width:100%">    
    <table id="MenuBox" width=130 cellpadding="0" cellspacing="4" style="border: 1 solid #1A71E6;border-left: 20 solid #1A71E6; position: relative; visibility: hidden">
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >关 于 我 们</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout';>加 入 我 们</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >交 易 市 场</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >网 页 超 市</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >域 名 注 册</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >虚 拟 主 机</td>
                </tr>
       <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >服 务 中 心</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >合 作 伙 伴</td>
                </tr>
              </table>    
    </div>    
        </td>
      </tr>
    </table>
     
    <script>
    function window.onload()
    {
     //MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight;
     MenuBox.style.pixelBottom = 0;
     MenuBox.style.visibility = "visible"
    }
    </script>
      

  2.   

    在 IE 的工具－internet选项－安全－自定义级别
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>New Page 1</title>
    <style>
    <!--
    .menuover    { background-color: #EAF2FD; border: 1px solid #1A71E6; cursor: hand; }
    .menuout     { cursor: hand; }
    td,a         { color: #1A71E6; font-size: 12px; font-family: 宋体; text-decoration: none }
    -->
    </style>
    <script>
    var moveStep = 15; // 移动单位
    var moveTime = 10; //移动时间function MoveMenuBox()
    {
     if(MenuBox.doing)
     {
      clearInterval(MenuBox.doing)
     }
     
     moveStep *= -1
     
     MenuBox.doing = setInterval("DoMoveAction()",moveTime)
    }
    function DoMoveAction()
    {
     var judger = MenuBox.style.pixelTop + moveStep;
     if(moveStep>0)
     {
      if(judger <= MenuBox.parentElement.offsetHeight)
      {
       MenuBox.style.pixelTop = judger
      }
      else
      {
       MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight;
       clearInterval(MenuBox.doing);
       MenuBox.doing = false;
      }
     }
     else
     {
      if(judger >= 0)
      {
       MenuBox.style.pixelTop = judger
      }
      else
      {
       MenuBox.style.pixelTop = 0;
       clearInterval(MenuBox.doing);
       MenuBox.doing = false;
      } 
     }
    }
    </script>  
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100%">    
    <table id="judgerBox" width=130 cellpadding="0" cellspacing="0" height="29">
          <tr>
      <td valign="middle" align="center" height="4" width="128" bgcolor="#FFFFFF" style="font-size: 6px">
      </td> 
    </tr> 
    <tr>
      <td onclick="MoveMenuBox()" valign="middle" align="center" height="25" style="cursor: hand; background-color: #1A71E6; color: #FFFFFF; border: 1 outset #FFFFFF" width="128">控 
        制 按 钮</td> 
    </tr> 
    </table>       
        </td>
      </tr>
        <tr>
        <td width="100%">
    <div style="overflow: hidden; height:100%; width:100%">    
    <table id="MenuBox" width=130 cellpadding="0" cellspacing="4" style="border: 1 solid #1A71E6;border-left: 20 solid #1A71E6; position: relative; visibility: hidden">
        <tr>
          <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >关 于 我 们</td>
        </tr>
        <tr>
          <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout';>加 入 我 们</td>
        </tr>
        <tr>
          <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >交 易 市 场</td>
        </tr>
        <tr>
          <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >网 页 超 市</td>
        </tr>
        <tr>
          <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >域 名 注 册</td>
        </tr>
        <tr>
          <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >虚 拟 主 机</td>
        </tr>
    <tr>
          <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >服 务 中 心</td>
        </tr>
        <tr>
          <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >合 作 伙 伴</td>
        </tr>
      </table>    
    </div>    
        </td>
      </tr>
    </table>
     
    <script>
    function window.onload()
    {
     MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight;
     MenuBox.style.visibility = "visible"
    }
    </script>
      

  3.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>New Page 1</title>
    <style>
    <!--
    .menuover    { background-color: #EAF2FD; border: 1px solid #1A71E6; cursor: hand; }
    .menuout     { cursor: hand; }
    td,a         { color: #1A71E6; font-size: 12px; font-family: 宋体; text-decoration: none }
    -->
    </style>
    <script>
    var moveStep = 15; // 移动单位
    var moveTime = 10; //移动时间function MoveMenuBox()
    {
     if(MenuBox.doing)
     {
      clearInterval(MenuBox.doing)
     }
     
     moveStep *= -1
     
     MenuBox.doing = setInterval("DoMoveAction()",moveTime)
    }
    function DoMoveAction()
    {
     //var judger = MenuBox.style.pixelTop + moveStep;
     var judger = MenuBox.style.pixelBottom + moveStep;
     if(moveStep>0)
     {
      //if(judger <= MenuBox.parentElement.offsetHeight)
      if(judger <= MenuBox.parentElement.offsetHeight)
      {
    //   MenuBox.style.pixelTop = judger
         MenuBox.style.pixelBottom = judger
      }
      else
      {
    //   MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight;
       MenuBox.style.pixelBottom = MenuBox.parentElement.offsetHeight;
       clearInterval(MenuBox.doing);
       MenuBox.doing = false;
      }
     }
     else
     {
      if(judger >= 0)
      {
    //   MenuBox.style.pixelTop = judger
       MenuBox.style.pixelBottom = judger
      }
      else
      {
    //   MenuBox.style.pixelTop = 0;
         MenuBox.style.pixelBottom = 0;
       clearInterval(MenuBox.doing);
       MenuBox.doing = false;
      } 
     }
    }
    </script>  
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0">  <tr>
        <td width="100%">
        
    <table id="judgerBox" width=130 cellpadding="0" cellspacing="0" height="29">
                <tr>
                  <td onclick="MoveMenuBox()" valign="middle" align="center" height="25" style="cursor: hand; background-color: #1A71E6; color: #FFFFFF; border: 1 outset #FFFFFF" width="128">控 
                    制 按 钮</td> 
                </tr> 
                <tr>
                  <td valign="middle" align="center" height="4" width="128" bgcolor="#FFFFFF" style="font-size: 6px">
                  </td> 
                </tr> 
              </table>       
        </td>
      </tr>
      <tr>
        <td width="100%">
    <div style="overflow: hidden; height:100%; width:100%">    
    <table id="MenuBox" width=130 cellpadding="0" cellspacing="4" style="border: 1 solid #1A71E6;border-left: 20 solid #1A71E6; position: relative; visibility: hidden">
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >关 于 我 们</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout';>加 入 我 们</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >交 易 市 场</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >网 页 超 市</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >域 名 注 册</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >虚 拟 主 机</td>
                </tr>
       <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >服 务 中 心</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >合 作 伙 伴</td>
                </tr>
              </table>    
    </div>    
        </td>
      </tr>
    </table>
     
    <script>
    function window.onload()
    {
     //MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight;
     MenuBox.style.pixelBottom = MenuBox.parentElement.offsetHeight; 
     MenuBox.style.visibility = "visible"
    }
    </script>
      

  4.   

    好像是偶以前写的：http://www.webucn.com那个不太理想，我现在自己都快理不清了 :-(  等下帮你写一个往下的。
      

  5.   

    <script language=javascript>
    function menuShow()
    {
      myMenu.style.display='block';
      if(myMenu.style.pixelHeight<=120)
      {
        myMenu.style.pixelHeight+=5;
        timer=setTimeout('menuShow()',20);
      }
    }
    function menuHide()
    {
      myMenu.style.display='none';
      myMenu.style.pixelHeight=0;
    }
    </script><body onclick=menuHide()><a href=#none onclick=menuShow()>Menu</a>
    <div style="position:relative;top:11px;left:0px;height:0px;width:80px;display:none;overflow:hidden;border:1px solid #000000" id=myMenu>
      menu1<br>
      menu2<br>
      ...<br>
      menuN
    </div>
      

  6.   

    浮动层实现版本：
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>New Page 1</title>
    <style>
    <!--
    .menuover    { background-color: #EAF2FD; border: 1px solid #1A71E6; cursor: hand; }
    .menuout     { cursor: hand; }
    td,a         { color: #1A71E6; font-size: 12px; font-family: 宋体; text-decoration: none }
    -->
    </style>
    <script>
    var moveStep = 15; // 移动单位
    var moveTime = 10; //移动时间function MoveMenuBox()
    {
     if(MenuBox.doing)
     {
      clearInterval(MenuBox.doing)
     }
     
     moveStep *= -1
     
     MenuBox.doing = setInterval("DoMoveAction()",moveTime)
    }
    function DoMoveAction()
    {
     //var judger = MenuBox.style.pixelTop + moveStep;
     var judger = MenuBox.style.pixelBottom + moveStep;
     if(moveStep>0)
     {
      //if(judger <= MenuBox.parentElement.offsetHeight)
      if(judger <= MenuBox.parentElement.offsetHeight)
      {
    //   MenuBox.style.pixelTop = judger
         MenuBox.style.pixelBottom = judger
      }
      else
      {
    //   MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight;
       MenuBox.style.pixelBottom = MenuBox.parentElement.offsetHeight;
       clearInterval(MenuBox.doing);
       MenuBox.doing = false;
      }
     }
     else
     {
      if(judger >= 0)
      {
    //   MenuBox.style.pixelTop = judger
       MenuBox.style.pixelBottom = judger
      }
      else
      {
    //   MenuBox.style.pixelTop = 0;
         MenuBox.style.pixelBottom = 0;
       clearInterval(MenuBox.doing);
       MenuBox.doing = false;
      } 
     }
    }
    </script>  
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0">  <tr>
        <td width="100%">
        
    <table id="judgerBox" width=130 cellpadding="0" cellspacing="0" height="29">
                <tr>
                  <td onclick="MoveMenuBox()" valign="middle" align="center" height="25" style="cursor: hand; background-color: #1A71E6; color: #FFFFFF; border: 1 outset #FFFFFF" width="128">控 
                    制 按 钮</td> 
                </tr> 
                <tr>
                  <td valign="middle" align="center" height="4" width="128" bgcolor="#FFFFFF" style="font-size: 6px">
                  </td> 
                </tr> 
              </table>       
        </td>
      </tr>
      <tr>
        <td width="100%">
    <div style="overflow: hidden; position:absolute; width:200px; height:300px; z-index:1;">    
    <table id="MenuBox" width=130 cellpadding="0" cellspacing="4" style="border: 1 solid #1A71E6;border-left: 20 solid #1A71E6; position: relative; visibility: hidden">
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >关 于 我 们</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout';>加 入 我 们</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >交 易 市 场</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >网 页 超 市</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >域 名 注 册</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >虚 拟 主 机</td>
                </tr>
       <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >服 务 中 心</td>
                </tr>
                <tr>
                  <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; >合 作 伙 伴</td>
                </tr>
              </table>    
    </div>    
        </td>
      </tr>
    </table>
     
    <script>
    function window.onload()
    {
     //MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight;
     MenuBox.style.pixelBottom = MenuBox.parentElement.offsetHeight; 
     MenuBox.style.visibility = "visible"
    }
    </script>
    asdasdf