鼠标移到导航上显示下拉菜单

最新推荐文章于 2024-04-17 18:10:45 发布

round122

最新推荐文章于 2024-04-17 18:10:45 发布

阅读量1.5k

点赞数

分类专栏： C#语言文章标签： python xhtml 测试

本文链接：https://blog.csdn.net/round122/article/details/84413261

版权

C#语言专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<%@ 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>