<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TableAutoList.aspx.cs" Inherits="AjaxDEMO.TableAutoList" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标移到导航上 显示下拉菜单功能 </title> <script type="text/javascript"> function setList(control) { var child = document.getElementById("setChild"); var td2 = document.getElementById(control); var t=td2.offsetTop; var l=td2.offsetLeft; child.style.position="relative" ; child.style.left = l; child.style.top = t ; child.style.display="block"; // var t=document.getElementById("set").offsetTop; // var l=document.getElementById("set").offsetLeft; // alert(l); } function outList() { document.getElementById("setChild").style.display="none"; } </script> </head> <body> <form method="post" action="TableAutoList.aspx" id="form1"> <div> <table id="navigation"> <tr> <td id="index"> <a id="A" title="首页" href="DropAutoList.aspx">首页</a> </td> <td id="set" οnmοusemοve="setList('set')" οnmοuseοut="outList()"> 项目1 </td> <td id="Td3"> <a href="DropAutoList.aspx" οnmοusemοve="setList('Td3')" οnmοuseοut="outList()">项目2</a> </td> <td id="Td4"> <a href="DropAutoList.aspx" οnmοusemοve="setList('Td4')" οnmοuseοut="outList()">项目3</a> </td> <td id="Td5"> <a href="DropAutoList.aspx" οnmοusemοve="setList('Td5')" οnmοuseοut="outList()">项目4</a> </td> <td id="Td6"> <a href="DropAutoList.aspx" οnmοusemοve="setList('Td6')" οnmοuseοut="outList()">项目5</a> </td> <td id="Td2" οnmοusemοve="setList('Td2')" οnmοuseοut="outList()"> 项目6 </td> </tr> </table> </div> <div id="setChild" style="display: none"> <table> <tr> <td> 条幅1 </td> </tr> <tr> <td> 条幅2 </td> </tr> <tr> <td> 条幅3 </td> </tr> <tr> <td> 条幅4 </td> </tr> </table> </div> </form> </body> </html>