javascript轻松实现当鼠标移开时已弹出子菜单自动消失

复制代码 代码如下:

  <html>

  <head>

  <style type="text/css">

  .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:

  yellow;width:180;

  font-size:9pt;

  }

  </style>

  </head>

  <body>

  <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.display='';

  m.style.pixelLeft = getPos(el,"Left")

  m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}

  if ((m!=cm) && (cm)) cm.style.display='none';cm=m}

  </SCRIPT>

  <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="display:none" onmouseleave="this.style.display='none'">

  <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="display:none" onmouseleave="this.style.display='none'">

  <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="display:none" onmouseleave="this.style.display='none'">

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