搜了一天了，BAIDU GOOGLE没有资料了，求救一下

<!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>
        <script src="jquery-1.3.2.js">
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
            .mydiv {
                position: absolute;
                z-index: 1;
                word-break: keep-all;
                display: none;
border:1px #F00 solid;
            }
            
            body {
                margin-left: 0px;
                margin-top: 0px;
                margin-right: 0px;
                margin-bottom: 0px;
            }
        </style>
        <script>
            var activeTR;//鼠标在哪个行tr对象中
            var activeDIV;//哪个子类DIV在显示
            var tableIDValue = "mytable";
            
            //离开td事件
            //rowNum:第几行
            //trObject:该行tr的JS对象
            //eventParam:event事件对象参数
            function tdout(rowNum, trObject, eventParam){
                //取得当前列的left坐标
                var tdLeft = $(trObject).offset().left;
                //取得当前列尾的left坐标
                var tdEndLeft = $(trObject).offset().left + $(trObject).width();
                //取得当前列的top坐标
                var tdTop = $(trObject).offset().top;
                
                //event.clientY - 1 <= tdTop:如果向表上移开
                //event.clientX - 1 <= tdLeft:如果向表左移开
                //(event.clientY > ($("#mytable").offset().top + $("#mytable").height()))
                //如果向表下移开
                //如果3个条件其中个被满足，就证明鼠标离开了鼠标，但不包括右方向，因为右方向显示的是子类DIV
                //所以只判断了：上左下
                if ((event.clientY - 1 <= tdTop) || (event.clientX - 1 <= tdLeft) || (event.clientY > ($("#" + tableIDValue).offset().top + $("#" + tableIDValue).height()))) {
                    //执行这，就证明离开了table
                    //当前活动行对象清空
                    activeTR = null;
                    //隐藏刚才显示的DIV
                    $(activeDIV).hide();
                    //当前显示DIV对象清空
                    activeDIV = null;
                }
            }
            
            function trover(rowNum, trObject){
                if (activeTR == null) {
                    //如果activeTR为null则证明鼠标第一次进入table
                    //取得当前鼠标所在行的对象
                    activeTR = $(trObject);
                    //根据所在行数，取得对应的divX对象
                    activeDIV = $("#div" + rowNum);
                    
                    //取得当前列的left坐标
                    var tdLeft = $(trObject).offset().left;
                    //取得当前列尾的left坐标
                    var tdEndLeft = $(trObject).offset().left + $(trObject).width();
                    //取得当前列的top坐标
                    var tdTop = $(trObject).offset().top;
                    
                    //然后设定DIV显示在指定left坐标
                    $("#div" + rowNum).css("left", tdEndLeft);
                    //然后设定DIV显示在指定top坐标
                    $("#div" + rowNum).css("top", tdTop);
                    //显示指定的DIV
                    $("#div" + rowNum).show();
                }
                else {
                    //如果从另外1个tr中over过来则执行下面的代码
                    //当原来显示的DIV隐藏
                    $(activeDIV).hide();
                    //将当前鼠标所在的tr做为激动tr对象
                    activeTR = $(trObject);
                    //并且根据行数找到对应的DIV对象
                    activeDIV = $("#div" + rowNum);
                    
                    //取得当前列的left坐标
                    var tdLeft = $(trObject).offset().left;
                    //取得当前列尾的left坐标
                    var tdEndLeft = $(trObject).offset().left + $(trObject).width();
                    //取得当前列的top坐标
                    var tdTop = $(trObject).offset().top;
                    //然后设定DIV显示在指定left坐标
                    $("#div" + rowNum).css("left", tdEndLeft);
                    //然后设定DIV显示在指定top坐标
                    $("#div" + rowNum).css("top", tdTop);
                    //显示指定的DIV
                    $("#div" + rowNum).show();
                    
                }
            }
            
//鼠标从子类的DIV对象onmouseout时执行
            function divOut(divParam){
//alert('abcabcabc');
//var parentDiv=$(divParam).parent()
//当自己隐藏掉
                $(divParam).hide();
//初始化活动的TR对象
                activeTR = null;
//初始化活动的DIV
                activeDIV = null;
                
                
            }
        </script>
    </head>
    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <div id="div1" class="mydiv" onmouseout="divOut(this)" >
<table width="148" height="57" border="0" cellpadding="0" cellspacing="0"  >
<tbody onmouseout="event.cancelBubble=true;"> 
  <tr>
    <td width="28" height="15">abcacb</td>
  </tr>
    <tr>
    <td width="28" height="15">xxxx</td>
  </tr>
  </tbody>
</table>
        </div>
        
        
        <div id="div2" class="mydiv">
<table width="148" height="57" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="28" height="15" align="right" valign="bottom"><img src="daohangImages/李承铉_01.gif" width="28" height="15" /></td>
    <td height="15" style="background-image:url(daohangImages/李承铉_02.gif); background-repeat:repeat-x; background-position:bottom">&nbsp;</td>
    <td width="9" height="15" align="left" valign="bottom"><img src="daohangImages/李承铉_03.gif" width="9" height="15" /></td>
  </tr>
  <tr>
    <td width="28" style="background-image:url(daohangImages/李承铉_04.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
    <td bgcolor="#FDFACD" style="word-break:keep-all">
    <a href="http://www.baidu.com">baidu</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>
    
    </td>
    <td width="9" style="background-image:url(daohangImages/李承铉_06.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
  </tr>
  <tr>
    <td width="28" height="8" align="right" valign="top"><img src="daohangImages/李承铉_07.gif" width="28" height="8" /></td>
    <td height="8"  style="background-image:url(daohangImages/李承铉_08.gif); background-repeat:repeat-x; background-position:top">&nbsp;</td>
    <td width="9" height="8" align="left" valign="top"><img src="daohangImages/李承铉_09.gif" width="9" height="8" /></td>
  </tr>
</table>
        </div>
        
        
        <div id="div3" class="mydiv">
<table width="148" height="57" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="28" height="15" align="right" valign="bottom"><img src="daohangImages/李承铉_01.gif" width="28" height="15" /></td>
    <td height="15" style="background-image:url(daohangImages/李承铉_02.gif); background-repeat:repeat-x; background-position:bottom">&nbsp;</td>
    <td width="9" height="15" align="left" valign="bottom"><img src="daohangImages/李承铉_03.gif" width="9" height="15" /></td>
  </tr>
  <tr>
    <td width="28" style="background-image:url(daohangImages/李承铉_04.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
    <td bgcolor="#FDFACD" style="word-break:keep-all">
    <a href="http://www.baidu.com">baidu</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>
    
    </td>
    <td width="9" style="background-image:url(daohangImages/李承铉_06.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
  </tr>
  <tr>
    <td width="28" height="8" align="right" valign="top"><img src="daohangImages/李承铉_07.gif" width="28" height="8" /></td>
    <td height="8"  style="background-image:url(daohangImages/李承铉_08.gif); background-repeat:repeat-x; background-position:top">&nbsp;</td>
    <td width="9" height="8" align="left" valign="top"><img src="daohangImages/李承铉_09.gif" width="9" height="8" /></td>
  </tr>
</table>
        </div>        <table width="683" id="mytable" height="372" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td width="39">&nbsp;
                    
                </td>
                <td width="216">
                    <table width="100" border="0" cellpadding="0" cellspacing="1" id="mytable" bgcolor="#FF0000">
                        <tr bgcolor="#FFFFFF">
                            <td onmouseover="trover(1,this)" onmouseout="tdout(1,this,event)" height="33px">
                                计算机
                            </td>
                        </tr>
                        <tr bgcolor="#FFFFFF">
                            <td onmouseover="trover(2,this)" onmouseout="tdout(2,this,event)" height="33px">
                                化学
                            </td>
                        </tr>
                        <tr bgcolor="#FFFFFF">
                            <td onmouseover="trover(3,this)" onmouseout="tdout(3,this,event)" height="33px">
                                物理
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>代码很简单，就是把鼠标放入第一行时在右边显示子类
现在有2个问题：（1）从第一行快速的向右移，可以显示右边的DIV，慢的时候则在第一行的右边框处，右边的DIV就不显示了
（2）鼠标在右边的DIV时，离开时，不隐藏感谢大家的帮忙啊

解决方案 »

  1.   


    <!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>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    $(function(){
     $('#demo li').hover(function(){
      $(this).addClass('hover')
     },function(){
      $(this).removeClass('hover')
     })
    })
    //]]>
    </script>
    <style type="text/css">
    #demo li {position:relative; display:inline}
    #demo li dl {display:none;position:absolute;width:100px;top:0;left:0;background:#CCCCCC}
    #demo li.hover dl {display:block}
    </style>
    </head>
    <body>
    <div>
    <ul id="demo">
    <li>无标题文档<dl><dt>无标题文档1</dt><dt>无标题文档1</dt><dt>无标题文档1</dt></dl></li>
    <li>无标题文档<dl><dt>无标题文档2</dt><dt>无标题文档2</dt><dt>无标题文档2</dt></dl></li>
    <li>无标题文档<dl><dt>无标题文档3</dt><dt>无标题文档3</dt><dt>无标题文档3</dt></dl></li>
    <li>无标题文档<dl><dt>无标题文档4</dt><dt>无标题文档4</dt><dt>无标题文档4</dt></dl></li>
    <li>无标题文档<dl><dt>无标题文档5</dt><dt>无标题文档5</dt><dt>无标题文档5</dt></dl></li>
    </ul>
    </div>
    </body>
    </html>
      

  2.   

    老七，，，这个不行，我必须是DIV中是TABLE的，，不能是UL，，因为我要用TABLE布局，，这点非常重要，，帮我看看我的代码吧虽然代码比较多，但涉及的代码非常少，就看主类表的第一行的事件就行了，现在显示出来了，但有2个小毛病啊，，感谢
      

  3.   


    <!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>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    $(function(){
     $('#demo li').hover(function(){
      $(this).addClass('hover')
     },function(){
      $(this).removeClass('hover')
     })
    })
    //]]>
    </script>
    <style type="text/css">
    #demo li {position:relative; display:inline}
    #demo li div {display:none;position:absolute;width:100px;top:0;left:0;background:#CCCCCC}
    #demo li.hover div {display:block}
    </style>
    </head>
    <body>
    <div>
    <ul id="demo">
    <li>无标题文档<div>anything u want</div></li>
    <li>无标题文档<div>
        <table width="100" border="1">
            <tr>
                <td>&nbsp;1</td>
                <td>&nbsp;2</td>
                <td>&nbsp;3</td>
            </tr>
            <tr>
                <td>&nbsp;4</td>
                <td>&nbsp;5</td>
                <td>&nbsp;6</td>
            </tr>
            <tr>
                <td>&nbsp;7</td>
                <td>&nbsp;8</td>
                <td>&nbsp;9</td>
            </tr>
        </table>
    </div></li>
    <li>无标题文档<div>eeeeeeeeee</div></li>
    <li>无标题文档<div>ddddddddd</div></li>
    <li>无标题文档<div>fffffffff</div></li>
    </ul>
    </div>
    </body>
    </html>
      

  4.   

    我来回答吧，把下面红色字部分删了就行了。严重建议楼主放弃这种方式做菜单，费力不讨好，这种方式应该被淘汰。用jquery结合CSS的方式更好，也同样可以TABLE布局的。<!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>
    <script src="jquery-1.3.2.js">  </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    .mydiv {
    position: absolute;
    z-index: 1;
    word-break: keep-all;
    display: none;
    border:1px #F00 solid;
    }
    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    </style>
    <script>
      var activeTR;//鼠标在哪个行tr对象中
      var activeDIV;//哪个子类DIV在显示
      var tableIDValue = "mytable";
       
      //离开td事件
      //rowNum:第几行
      //trObject:该行tr的JS对象
      //eventParam:event事件对象参数
      function tdout(rowNum, trObject, eventParam){
      //取得当前列的left坐标
      var tdLeft = $(trObject).offset().left;
      //取得当前列尾的left坐标
      var tdEndLeft = $(trObject).offset().left + $(trObject).width();
      //取得当前列的top坐标
      var tdTop = $(trObject).offset().top;
       
      //event.clientY - 1 <= tdTop:如果向表上移开
      //event.clientX - 1 <= tdLeft:如果向表左移开
      //(event.clientY > ($("#mytable").offset().top + $("#mytable").height()))
      //如果向表下移开
      //如果3个条件其中个被满足，就证明鼠标离开了鼠标，但不包括右方向，因为右方向显示的是子类DIV
      //所以只判断了：上左下
      if ((event.clientY - 1 <= tdTop) || (event.clientX - 1 <= tdLeft) || (event.clientY > ($("#" + tableIDValue).offset().top + $("#" + tableIDValue).height()))) {
      //执行这，就证明离开了table
      //当前活动行对象清空
      activeTR = null;
      //隐藏刚才显示的DIV
      $(activeDIV).hide();
      //当前显示DIV对象清空
      activeDIV = null;
      }
      }
       
      function trover(rowNum, trObject){
      if (activeTR == null) {
      //如果activeTR为null则证明鼠标第一次进入table
      //取得当前鼠标所在行的对象
      activeTR = $(trObject);
      //根据所在行数，取得对应的divX对象
      activeDIV = $("#div" + rowNum);
       
      //取得当前列的left坐标
      var tdLeft = $(trObject).offset().left;
      //取得当前列尾的left坐标
      var tdEndLeft = $(trObject).offset().left + $(trObject).width();
      //取得当前列的top坐标
      var tdTop = $(trObject).offset().top;
       
      //然后设定DIV显示在指定left坐标
      $("#div" + rowNum).css("left", tdEndLeft);
      //然后设定DIV显示在指定top坐标
      $("#div" + rowNum).css("top", tdTop);
      //显示指定的DIV
      $("#div" + rowNum).show();
      }
      else {
      //如果从另外1个tr中over过来则执行下面的代码
      //当原来显示的DIV隐藏
      $(activeDIV).hide();
      //将当前鼠标所在的tr做为激动tr对象
      activeTR = $(trObject);
      //并且根据行数找到对应的DIV对象
      activeDIV = $("#div" + rowNum);
       
      //取得当前列的left坐标
      var tdLeft = $(trObject).offset().left;
      //取得当前列尾的left坐标
      var tdEndLeft = $(trObject).offset().left + $(trObject).width();
      //取得当前列的top坐标
      var tdTop = $(trObject).offset().top;
      //然后设定DIV显示在指定left坐标
      $("#div" + rowNum).css("left", tdEndLeft);
      //然后设定DIV显示在指定top坐标
      $("#div" + rowNum).css("top", tdTop);
      //显示指定的DIV
      $("#div" + rowNum).show();
       
      }
      }
       
    //鼠标从子类的DIV对象onmouseout时执行
      function divOut(divParam){
    //alert('abcabcabc');
    //var parentDiv=$(divParam).parent()
    //当自己隐藏掉
      $(divParam).hide();
    //初始化活动的TR对象
      activeTR = null;
    //初始化活动的DIV
      activeDIV = null;
       
       
      }
      </script>
    </head>
    <body>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id="div1" class="mydiv" onmouseout="divOut(this)" >
      <table width="148" height="57" border="0" cellpadding="0" cellspacing="0" >
        <tbody onmouseout="event.cancelBubble=true;">
          <tr>
            <td width="28" height="15">abcacb</td>
          </tr>
          <tr>
            <td width="28" height="15">xxxx</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="div2" class="mydiv">
      <table width="148" height="57" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="28" height="15" align="right" valign="bottom"><img src="daohangImages/李承铉_01.gif" width="28" height="15" /></td>
          <td height="15" style="background-image:url(daohangImages/李承铉_02.gif); background-repeat:repeat-x; background-position:bottom">&nbsp;</td>
          <td width="9" height="15" align="left" valign="bottom"><img src="daohangImages/李承铉_03.gif" width="9" height="15" /></td>
        </tr>
        <tr>
          <td width="28" style="background-image:url(daohangImages/李承铉_04.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
          <td bgcolor="#FDFACD" style="word-break:keep-all"><a href="http://www.baidu.com">baidu</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a> </td>
          <td width="9" style="background-image:url(daohangImages/李承铉_06.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
        </tr>
        <tr>
          <td width="28" height="8" align="right" valign="top"><img src="daohangImages/李承铉_07.gif" width="28" height="8" /></td>
          <td height="8" style="background-image:url(daohangImages/李承铉_08.gif); background-repeat:repeat-x; background-position:top">&nbsp;</td>
          <td width="9" height="8" align="left" valign="top"><img src="daohangImages/李承铉_09.gif" width="9" height="8" /></td>
        </tr>
      </table>
    </div>
    <div id="div3" class="mydiv">
      <table width="148" height="57" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="28" height="15" align="right" valign="bottom"><img src="daohangImages/李承铉_01.gif" width="28" height="15" /></td>
          <td height="15" style="background-image:url(daohangImages/李承铉_02.gif); background-repeat:repeat-x; background-position:bottom">&nbsp;</td>
          <td width="9" height="15" align="left" valign="bottom"><img src="daohangImages/李承铉_03.gif" width="9" height="15" /></td>
        </tr>
        <tr>
          <td width="28" style="background-image:url(daohangImages/李承铉_04.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
          <td bgcolor="#FDFACD" style="word-break:keep-all"><a href="http://www.baidu.com">baidu</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a> </td>
          <td width="9" style="background-image:url(daohangImages/李承铉_06.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
        </tr>
        <tr>
          <td width="28" height="8" align="right" valign="top"><img src="daohangImages/李承铉_07.gif" width="28" height="8" /></td>
          <td height="8" style="background-image:url(daohangImages/李承铉_08.gif); background-repeat:repeat-x; background-position:top">&nbsp;</td>
          <td width="9" height="8" align="left" valign="top"><img src="daohangImages/李承铉_09.gif" width="9" height="8" /></td>
        </tr>
      </table>
    </div>
    <table width="683" id="mytable" height="372" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="39">&nbsp;</td>
        <td width="216"><table width="100" border="0" cellpadding="0" cellspacing="1" id="mytable" bgcolor="#FF0000">
            <tr bgcolor="#FFFFFF">
              <td onmouseover="trover(1,this)" onmouseout="tdout(1,this,event)" height="33px"> 计算机 </td>
            </tr>
            <tr bgcolor="#FFFFFF">
              <td onmouseover="trover(2,this)" onmouseout="tdout(2,this,event)" height="33px"> 化学 </td>
            </tr>
            <tr bgcolor="#FFFFFF">
              <td onmouseover="trover(3,this)" onmouseout="tdout(3,this,event)" height="33px"> 物理 </td>
            </tr>
          </table></td>
      </tr>
    </table>
    </body>
    </html>
      

  5.   

    晕，格式还不对。<!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>
    <script src="jquery-1.3.2.js">  </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    .mydiv {
    position: absolute;
    z-index: 1;
    word-break: keep-all;
    display: none;
    border:1px #F00 solid;
    }
    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    </style>
    <script>
      var activeTR;//鼠标在哪个行tr对象中
      var activeDIV;//哪个子类DIV在显示
      var tableIDValue = "mytable";
       
      //离开td事件
      //rowNum:第几行
      //trObject:该行tr的JS对象
      //eventParam:event事件对象参数
      function tdout(rowNum, trObject, eventParam){
      //取得当前列的left坐标
      var tdLeft = $(trObject).offset().left;
      //取得当前列尾的left坐标
      var tdEndLeft = $(trObject).offset().left + $(trObject).width();
      //取得当前列的top坐标
      var tdTop = $(trObject).offset().top;
       
      //event.clientY - 1 <= tdTop:如果向表上移开
      //event.clientX - 1 <= tdLeft:如果向表左移开
      //(event.clientY > ($("#mytable").offset().top + $("#mytable").height()))
      //如果向表下移开
      //如果3个条件其中个被满足，就证明鼠标离开了鼠标，但不包括右方向，因为右方向显示的是子类DIV
      //所以只判断了：上左下
      if ((event.clientY - 1 <= tdTop) || (event.clientX - 1 <= tdLeft) || (event.clientY > ($("#" + tableIDValue).offset().top + $("#" + tableIDValue).height()))) {
      //执行这，就证明离开了table
      //当前活动行对象清空
      activeTR = null;
      //隐藏刚才显示的DIV
      $(activeDIV).hide();
      //当前显示DIV对象清空
      activeDIV = null;
      }
      }
       
      function trover(rowNum, trObject){
      if (activeTR == null) {
      //如果activeTR为null则证明鼠标第一次进入table
      //取得当前鼠标所在行的对象
      activeTR = $(trObject);
      //根据所在行数，取得对应的divX对象
      activeDIV = $("#div" + rowNum);
       
      //取得当前列的left坐标
      var tdLeft = $(trObject).offset().left;
      //取得当前列尾的left坐标
      var tdEndLeft = $(trObject).offset().left + $(trObject).width();
      //取得当前列的top坐标
      var tdTop = $(trObject).offset().top;
       
      //然后设定DIV显示在指定left坐标
      $("#div" + rowNum).css("left", tdEndLeft);
      //然后设定DIV显示在指定top坐标
      $("#div" + rowNum).css("top", tdTop);
      //显示指定的DIV
      $("#div" + rowNum).show();
      }
      else {
      //如果从另外1个tr中over过来则执行下面的代码
      //当原来显示的DIV隐藏
      $(activeDIV).hide();
      //将当前鼠标所在的tr做为激动tr对象
      activeTR = $(trObject);
      //并且根据行数找到对应的DIV对象
      activeDIV = $("#div" + rowNum);
       
      //取得当前列的left坐标
      var tdLeft = $(trObject).offset().left;
      //取得当前列尾的left坐标
      var tdEndLeft = $(trObject).offset().left + $(trObject).width();
      //取得当前列的top坐标
      var tdTop = $(trObject).offset().top;
      //然后设定DIV显示在指定left坐标
      $("#div" + rowNum).css("left", tdEndLeft);
      //然后设定DIV显示在指定top坐标
      $("#div" + rowNum).css("top", tdTop);
      //显示指定的DIV
      $("#div" + rowNum).show();
       
      }
      }
       
    //鼠标从子类的DIV对象onmouseout时执行
      function divOut(divParam){
    //alert('abcabcabc');
    //var parentDiv=$(divParam).parent()
    //当自己隐藏掉
      $(divParam).hide();
    //初始化活动的TR对象
      activeTR = null;
    //初始化活动的DIV
      activeDIV = null;
       
       
      }
      </script>
    </head>
    <body>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id="div1" class="mydiv" onmouseout="divOut(this)" >
      <table width="148" height="57" border="0" cellpadding="0" cellspacing="0" >
        <tbody onmouseout="event.cancelBubble=true;">
          <tr>
            <td width="28" height="15">abcacb</td>
          </tr>
          <tr>
            <td width="28" height="15">xxxx</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="div2" class="mydiv">
      <table width="148" height="57" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="28" height="15" align="right" valign="bottom"><img src="daohangImages/李承铉_01.gif" width="28" height="15" /></td>
          <td height="15" style="background-image:url(daohangImages/李承铉_02.gif); background-repeat:repeat-x; background-position:bottom">&nbsp;</td>
          <td width="9" height="15" align="left" valign="bottom"><img src="daohangImages/李承铉_03.gif" width="9" height="15" /></td>
        </tr>
        <tr>
          <td width="28" style="background-image:url(daohangImages/李承铉_04.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
          <td bgcolor="#FDFACD" style="word-break:keep-all"><a href="http://www.baidu.com">baidu</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a> </td>
          <td width="9" style="background-image:url(daohangImages/李承铉_06.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
        </tr>
        <tr>
          <td width="28" height="8" align="right" valign="top"><img src="daohangImages/李承铉_07.gif" width="28" height="8" /></td>
          <td height="8" style="background-image:url(daohangImages/李承铉_08.gif); background-repeat:repeat-x; background-position:top">&nbsp;</td>
          <td width="9" height="8" align="left" valign="top"><img src="daohangImages/李承铉_09.gif" width="9" height="8" /></td>
        </tr>
      </table>
    </div>
    <div id="div3" class="mydiv">
      <table width="148" height="57" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="28" height="15" align="right" valign="bottom"><img src="daohangImages/李承铉_01.gif" width="28" height="15" /></td>
          <td height="15" style="background-image:url(daohangImages/李承铉_02.gif); background-repeat:repeat-x; background-position:bottom">&nbsp;</td>
          <td width="9" height="15" align="left" valign="bottom"><img src="daohangImages/李承铉_03.gif" width="9" height="15" /></td>
        </tr>
        <tr>
          <td width="28" style="background-image:url(daohangImages/李承铉_04.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
          <td bgcolor="#FDFACD" style="word-break:keep-all"><a href="http://www.baidu.com">baidu</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a> </td>
          <td width="9" style="background-image:url(daohangImages/李承铉_06.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
        </tr>
        <tr>
          <td width="28" height="8" align="right" valign="top"><img src="daohangImages/李承铉_07.gif" width="28" height="8" /></td>
          <td height="8" style="background-image:url(daohangImages/李承铉_08.gif); background-repeat:repeat-x; background-position:top">&nbsp;</td>
          <td width="9" height="8" align="left" valign="top"><img src="daohangImages/李承铉_09.gif" width="9" height="8" /></td>
        </tr>
      </table>
    </div>
    <table width="683" id="mytable" height="372" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="39">&nbsp;</td>
        <td width="216"><table width="100" border="0" cellpadding="0" cellspacing="1" id="mytable" bgcolor="#FF0000">
            <tr bgcolor="#FFFFFF">
              <td onmouseover="trover(1,this)" onmouseout="tdout(1,this,event)" height="33px"> 计算机 </td>
            </tr>
            <tr bgcolor="#FFFFFF">
              <td onmouseover="trover(2,this)" onmouseout="tdout(2,this,event)" height="33px"> 化学 </td>
            </tr>
            <tr bgcolor="#FFFFFF">
              <td onmouseover="trover(3,this)" onmouseout="tdout(3,this,event)" height="33px"> 物理 </td>
            </tr>
          </table></td>
      </tr>
    </table>
    </body>
    </html>
      

  6.   

    楼主可以试试这种形式的，会方便很多。
    <!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>
    <script src="jquery-1.3.2.js">  </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    body {
    margin:0;
    }
    .menu {
    width:100px;
    }
    .menu li {
    list-style:none;
    border:1px solid red;
    position:relative;
    }
    .menu li,
    .menu li span {
    display:block;
    width:100px;
    height:33px;
    line-height:33px;
    float:left;
    }
    .menu li span {
    font-size:12px;
    }
    .menu li table {
    position: absolute;
    z-index: 1;
    word-break: keep-all;
    border:1px #F00 solid;
    width:148px;
    height:57px;
    display: none;
    }
    .menu li.hover table,
    .menu li:hover table {
    display: block;
    left:100px;
    top:0;
    }
    </style>
    <!--[if lte IE 6]>
    <script type="text/javascript">
    $(function(){
    $(".menu li").hover(
    function(){$(this).addClass("hover");},
    function(){$(this).removeClass("hover");}
    );
    });
    </script>
    <![endif]-->
    </head>
    <body>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <table width="683" id="mytable" height="372" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="39">&nbsp;</td>
        <td width="216"><div class="menu">
            <li><span>计算机</span>
              <table border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="28" height="15">abcacb</td>
                  </tr>
                  <tr>
                    <td width="28" height="15">xxxx</td>
                  </tr>
              </table>
            </li>
            <li><span>化学</span>
              <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="28" height="15" align="right" valign="bottom"><img src="daohangImages/李承铉_01.gif" width="28" height="15" /></td>
                  <td height="15" style="background-image:url(daohangImages/李承铉_02.gif); background-repeat:repeat-x; background-position:bottom">&nbsp;</td>
                  <td width="9" height="15" align="left" valign="bottom"><img src="daohangImages/李承铉_03.gif" width="9" height="15" /></td>
                </tr>
                <tr>
                  <td width="28" style="background-image:url(daohangImages/李承铉_04.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
                  <td bgcolor="#FDFACD" style="word-break:keep-all"><a href="http://www.baidu.com">baidu</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a> </td>
                  <td width="9" style="background-image:url(daohangImages/李承铉_06.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
                </tr>
                <tr>
                  <td width="28" height="8" align="right" valign="top"><img src="daohangImages/李承铉_07.gif" width="28" height="8" /></td>
                  <td height="8" style="background-image:url(daohangImages/李承铉_08.gif); background-repeat:repeat-x; background-position:top">&nbsp;</td>
                  <td width="9" height="8" align="left" valign="top"><img src="daohangImages/李承铉_09.gif" width="9" height="8" /></td>
                </tr>
              </table>
            </li>
            <li><span>物理</span>
              <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="28" height="15" align="right" valign="bottom"><img src="daohangImages/李承铉_01.gif" width="28" height="15" /></td>
                  <td height="15" style="background-image:url(daohangImages/李承铉_02.gif); background-repeat:repeat-x; background-position:bottom">&nbsp;</td>
                  <td width="9" height="15" align="left" valign="bottom"><img src="daohangImages/李承铉_03.gif" width="9" height="15" /></td>
                </tr>
                <tr>
                  <td width="28" style="background-image:url(daohangImages/李承铉_04.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
                  <td bgcolor="#FDFACD" style="word-break:keep-all"><a href="http://www.baidu.com">baidu</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a>&nbsp;&nbsp;<a href="http://www.google.com">google</a> </td>
                  <td width="9" style="background-image:url(daohangImages/李承铉_06.gif); background-repeat:repeat-y; background-position:top">&nbsp;</td>
                </tr>
                <tr>
                  <td width="28" height="8" align="right" valign="top"><img src="daohangImages/李承铉_07.gif" width="28" height="8" /></td>
                  <td height="8" style="background-image:url(daohangImages/李承铉_08.gif); background-repeat:repeat-x; background-position:top">&nbsp;</td>
                  <td width="9" height="8" align="left" valign="top"><img src="daohangImages/李承铉_09.gif" width="9" height="8" /></td>
                </tr>
              </table>
            </li>
            <li><span>dddd</span></li>
            <li><span>aaaa</span></li>
            <li><span>eeeww</span></li>
          </div></td>
      </tr>
    </table>
    </body>
    </html>