江湖救急！

Question

下面是一个css做的下拉菜单，鼠标放上的时候，菜单显示，但是鼠标离开后，菜单并不消失， 哪位好心人能帮我改一下，变成鼠标一旦离开下拉菜单显示的区域，下拉菜单就会消失，谢谢。。只能发100分的帖， 不好意思。 <style>   
  body   
  {   
  font-size:12;     
    
  }   
  A:link     
  {   
          FONT-SIZE:   9pt;   
            COLOR:   #000000;     
          TEXT-DECORATION:   none;   
  }   
  A:visited     
  {   
          FONT-SIZE:   9pt;   
        COLOR:   #000000;     
          TEXT-DECORATION:   none;   
  }   
  A:active     
  {   
          FONT-SIZE:   9pt;   
          COLOR:   #000000;     
          TEXT-DECORATION:   none;   
  }   
  A:hover     
  {   
          COLOR:   #FF0000;   
  COLOR:   #000000;     
          TEXT-DECORATION:   none;   
  }   
    
  input   
  {   
  border:1px   solid   #D4D0c8;   
  width:100;   
  overflow:visible;   
  }   
  button   
  {   
  border:1px   solid     #999999;   
  /*#D4D0c8*/   
  width:60;   
  overflow:visible;   
  margin-left:2;   
  cursor:hand;   
  font-size:12;   
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff',   endColorStr='#D4D0c8',   gradientType='0');   
  }   
    
  td   
  {   
  font-size:12;   
  text-indent:3;   
  }   
  th   
  {   
  letter-spacing:5;   
  font-size:12;   
  height:20;   
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff',   endColorStr='#D4D0c8',   gradientType='0');   
  }   
    
  table   
  {   
    /*margin-left:10;*/   
    border:4px   #999999   double   ;   
    border-collapse:collapse;     
    width:100%;   
  }   
  textarea     
  {     
  overflow:visible;   
  width:100%;   
  height:100;   
  border:1px   #D4D0c8   solid;   
  }   
  ul   {   
  margin-top:   0px;   
  margin-right:   0px;   
  margin-bottom:   0px;   
  margin-left:   20px;   
  text-align:   left;   
  }   
  </style>   
  <p   style="display:none"   id="menu1">   
  <TABLE   WIDTH=100   BORDER=1     style='cursor:hand'     style='border:4px   #999999   double;border-collapse:collapse;background-color:#ddd9d3;'>   
  <TR><TD   style='font-size:9pt;'onclick="parent.location.href='../music/area.asp'">大类管理</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../music/artist.asp'">歌手管理</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../music/collection.asp'">专辑管理</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../music/song.asp'">歌曲管理</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='http://61.152.98.240:45534/lib_batch.asp'">批量上传</a></TD></TR>   
  </TABLE>   
  </p>   
  <p   style="display:none"   id="menu2">   
  <TABLE   WIDTH=100   BORDER=1     style='cursor:hand'     style='border:4px   #999999   double;border-collapse:collapse;background-color:#ddd9d3;'>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../comment/comment.asp'">类别管理</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../comment/com_admin.ASP'">评论管理</TD></TR>        
  </TABLE>   
  </p>   
  <p   style="display:none"   id="menu3">   
  <TABLE   WIDTH=100   BORDER=1     style='cursor:hand'     style='border:4px   #999999   double;border-collapse:collapse;background-color:#ddd9d3;'>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../News/news_class_manage.htm'">类别管理</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../News/news_append.htm'">发布新闻</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../News/news_manage.htm'">新闻管理</TD></TR>     
  </TABLE>   
  </p>   
  <p   style="display:none"   id="menu4">   
  <TABLE   WIDTH=100   BORDER=1     style='cursor:hand'     style='border:4px   #999999   double;border-collapse:collapse;background-color:#ddd9d3;'>   
  <TR><TD   style='font-size:9pt;color:red'   onclick="parent.location.href='../sort/Sort_manage.asp?kind=热力排行'">热力排行</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="">酸歌排行</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="">甜歌排行</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="">苦歌排行</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="">辣歌排行</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="">咸歌排行</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="">华语歌曲排行</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="">原创排行</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="">翻唱排行</TD></TR>   
  </TABLE>   
  </p>   
  <p   style="display:none"   id="menu5">   
  <TABLE   WIDTH=100   BORDER=1     style='cursor:hand'     style='border:4px   #999999   double;border-collapse:collapse;background-color:#ddd9d3;'>   
    
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../Game/diy_class_manage.asp'">类别管理</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../Game/diy_manage.asp'">文件管理</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../Game/Game_seach.asp'">查找更改</TD></TR>   
  </TABLE>   
  </p>   
  <p   style="display:none"   id="menu6">   
  <TABLE   WIDTH=100   BORDER=1     style='cursor:hand'     style='border:4px   #999999   double;border-collapse:collapse;background-color:#ddd9d3;'>   
    <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../diy/diy_class_manage.asp'">   类别管理   </TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../diy/diy_manage.asp'">文件管理</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../diy/diy_seach.asp'">查找更改</TD></TR>   
  </TABLE>   
  </p>   
  <p   style="display:none"   id="menu7">   
  <TABLE   WIDTH=100   BORDER=1     style='cursor:hand'     style='border:4px   #999999   double;border-collapse:collapse;background-color:#ddd9d3;'>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../createIncludeFile/templetManage.asp'">模板管理</TD></TR>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../createIncludeFile/default.asp'">文件管理</TD></TR>   
  </TABLE>   
  </p>   
  <p   style="display:none"   id="menu8">   
  <TABLE   WIDTH=100   BORDER=1       style='cursor:hand;border:4px   #999999   double;border-collapse:collapse;background-color:#ddd9d3;'>   
  <TR><TD   style='font-size:9pt;'   onclick="parent.location.href='../copyright/copyright_manage.asp'">版权管理</TD></TR>   
  </TABLE>   
  </p>   
  <TABLE     BORDER=1   CELLPADDING=1   CELLSPACING=1       style='cursor:hand'>   
      <TR>   
  <TH   onmouseover="showMenu(this,1);">音乐库</TH>   
  <TH   onmouseover="showMenu(this,2);">评论</TH>   
  <TH   onmouseover="showMenu(this,3);">新闻</TH>   
  <TH   onmouseover="showMenu(this,4);">排行</TH>   
  <TH   onmouseover="showMenu(this,5);">游戏原声</TH>   
  <TH   onmouseover="showMenu(this,6);">音乐DIY</TH>   
  <TH   onmouseover="showMenu(this,7);">Include</TH>   
  <TH   onmouseover="showMenu(this,8);">其他管理</TH>   
  </TR>   
  </TABLE>   
  <SCRIPT>   
  var oPopup= window.createPopup();     
  function   showMenu(obj,x)   
  {           
        var   oPopBody   =   oPopup.document.body;     
        var     HTML   =   document.all("menu"   +   x).innerHTML   ;           
        oPopBody.innerHTML   =   HTML;     
        var   rows   =   HTML.match(/<TR>/g).length;   
          oPopup.show(obj.offsetLeft   +   10,   obj.offsetTop   +   40,   100,   rows   *   18   +6,   document.body)     ;   
  }     
  </SCRIPT>

Answer 1

用window.createPopup() 好象就只能点击 弹出 窗口外才能隐藏 

Answer 2

楼上的正解，或者设置一个onmouserout去隐藏这个Popuup。测试不了代码，CSDN搞得一堆&apos;和空格郁闷。

Answer 3

将脚本改为如下    <SCRIPT >       
    var oPopup= window.createPopup();  
    var is_show = false;   
    var left,top,width,height;
          
    function showMenu(obj,x)       
    {                       
       var oPopBody  = oPopup.document.body;           
       var HTML = document.all("menu"+x).innerHTML;                       
       oPopBody.innerHTML = HTML;           
       var rows  = HTML.match(/<TR >/g).length;    
       left = obj.offsetLeft;
       top = obj.offsetTop;
       width = 100;
       height = rows*18+6;
       is_show = true;
       oPopup.show(obj.offsetLeft+10,obj.offsetTop+40,100,rows*18+6,document.body); 
    }   
    
    document.onmousemove = function(e){
    var x,y;
    if(!document.all){ x = e.clientX; y = document.documentElement.scrollTop+ e.clientY; }else{ x = event.x; y =document.documentElement.scrollTop+ event.y; }
        if(is_show)
        {
            if(x< left|| x>left+width ||y<top ||y>top+height)
             unshowMenu();
        }
    }    function unshowMenu()
    {
       left = 0;
       top = 0;
       width = 0;
       height = 0;
       is_show = false;
       oPopup.hide();
    }        
    </SCRIPT >