下拉目录的一种实现

来源:互联网 发布:淘宝残疾人扶持 编辑:程序博客网 时间:2024/06/05 06:17

拷贝源代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<STYLE>
<!--
  .menu {background-color:green;width:120; height:20;color: white; text-align: center;font-size:9pt;font-weight:bolder}
  .submenu {position:absolute;top:40;background-color:lightyellow;width:180; font-size:9pt}
-->
</STYLE>
<SCRIPT>
  var cm=null;
  document.onclick = new Function("show(null)") ;
function getPos(el,sProp) 
{
    var iPos = 0 ;
    while (el!=null) 
 {
           iPos+=el["offset" + sProp];
          el = el.offsetParent;
     }
    return iPos;

function show(el,m) 
{
 if (m)
 {
       m.style.visibility='visible';
     m.style.pixelLeft = getPos(el,"Left") ;
        m.style.pixelTop = getPos(el,"Top") + el.offsetHeight;
 } 
    if ((m!=cm) && (cm))
        cm.style.visibility='hidden';
    cm=m;

</SCRIPT>
</head>

<body>
<table border=0>
  <tr>
   <td ID="d1" onmouseover="show(this,ds1);" class="menu">杂志技术站点</td>
   <td ID="d2" onmouseover="show(this,ds2);"  class="menu">门户站点</td>
   <td ID="d3" onmouseover="show(this,ds3);" class="menu">个人收藏站点</td>
  </tr>
</table>
<DIV ID="ds1" CLASS="submenu" STYLE="visibility:hidden">
  <BR><A HREF="http://www.yesky.com">天极网 Yesky.com</A>
  <BR><A HREF="http://www.cbinews.com">电脑商情报</A>
  <BR><A HREF="http://www.newsoft.com.cn">新潮电子</A>
  <BR> 
</DIV> 
<DIV ID="ds2" CLASS="submenu" STYLE="visibility:hidden">
  <BR><A HREF="http://www.sina.com.cn">新浪网 Sina</A>
  <BR><A HREF="http://www.sohu.com.cn">搜狐 Sohu</A>
  <BR><A HREF="http://www.163.com">网易 Netease</A>
  <BR> 
</DIV>
<DIV ID="ds3" CLASS="submenu" STYLE="visibility:hidden">
  <BR><A HREF="http://haoel.yeah.net">耗子网络编程站</A>
  <BR><A HREF="http://www.5460.net">中国同学录</A>
  <BR><A HREF="http://www.csdn.net">中国软件开发网</A>
  <BR> 
</DIV>
</body>
</html>
 

原创粉丝点击