javaScript悬停控件上的浮动层定位

如何实现当鼠标悬停控件上时，出现该控件的尾部显示对应的层，鼠标移动到该层上进行相应的操作，当鼠标移除时（不在控件上也不在层上）层隐藏， 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
//省份城市控件
function displayCity(cityName)
{
switch(cityName)
{
  case"北京市":
        document.getElementById("divCityname").innerHTML="<table  align='center' cellpadding='0' cellspacing='0'><tr><td><input type='checkbox' name='checkbox' value='海淀区'>海淀区</td><td><input type='checkbox' name='checkbox' value='朝阳区'>朝阳区</td></tr><tr><td><input type='checkbox' name='checkbox' value='大兴区'>大兴区</td><td><input type='checkbox' name='checkbox' value='东城区'>东城区</td></tr><tr><td><input type='checkbox' name='checkbox' value='昌平区'>昌平区</td><td><input type='checkbox' name='checkbox' value='西城区'>西城区</td></tr><tr><td><input type='checkbox' name='checkbox' value='宣武区'>宣武区</td><td><input type='checkbox' name='checkbox' value='丰台区'>丰台区</td></tr><tr><td><input type='checkbox' name='checkbox' value='房山区'>房山区</td><td><input type='checkbox' name='checkbox' value='通州区'>通州区</td></tr><tr><td><input type='checkbox' name='checkbox' value='石景山区'>石景山区</td><td><input type='checkbox' name='checkbox' value='顺义区'>顺义区</td></tr><tr><td><input type='checkbox' name='checkbox' value='近郊'>近郊</td><td>&nbsp;</td></tr></table>";
    document.getElementById("divCityname").style.left=document.getElementById("chkbeijin").style.pixelLeft; //出现问题的地方 (打算获得控件的位置)
    document.getElementById("divCityname").style.top = document.getElementById("chkbeijin").style.pixelTop;
        document.getElementById("divCityname").style.display= "block";
        break;
case "上海市":
        document.getElementById("divCityname").innerHTML="<table align='center' cellpadding='0' cellspacing='0'><tr><td><input type='checkbox'name='checkbox' value='黄浦区'>黄浦区</td><td><input type='checkbox' name='checkbox' value='卢湾区'>卢湾区</td><td><input type='checkbox' name='checkbox' value='徐汇区'>徐汇区</td></tr><tr><td><input type='checkbox' name='checkbox' value='长宁区'>长宁区</td><td><input type='checkbox' name='checkbox' value='普陀区'>普陀区</td><td><input type='checkbox' name='checkbox' value='闸北区'>闸北区</td></tr><tr><td><input type='checkbox' name='checkbox' value='虹口区'>虹口区</td><td><input type='checkbox' name='checkbox' value='杨浦区'>杨浦区</td><td><input type='checkbox' name='checkbox' value='浦东新区'>浦东新区</td></tr><tr><td><input type='checkbox' name='checkbox' value='宝山区'>宝山区</td><td><input type='checkbox' name='checkbox' value='嘉定区'>嘉定区</td><td><input type='checkbox' name='checkbox' value='松江区'>松江区</td></tr><tr><td><input type='checkbox' name='checkbox' value='闵行区'>闵行区</td><td><input type='checkbox' name='checkbox' value='近郊区'>近郊区</td><td>&nbsp;</td></tr></table>";
        document.getElementById("divCityname").style.left=event.clientX; //获取鼠标的坐标位置赋值给DIV层，（可鼠标就移动不到控件上了）
    document.getElementById("divCityname").style.top=event.clientY;
        document.getElementById("divCityname").style.display= "block";
        break;
}
}//隐藏城市
function hiddenCity()
{
    document.getElementById("divCityname").style.display="none";
}
</script><!--css样式-->
<style type="text/css">
<!--
#divCityname {    position:absolute;
    overflow: auto;
}-->
</style>
</head>
<body onLoad="hiddenCity()">
<div id="divCityname" title="城市选择" style=" background-color:#FFDFFF; border-width:1px; border-style:solid; border-color:#0000FF; font-size:12px;"></div>
<table width="189" height="62" align="center" cellpadding="0" cellspacing="0">
  
  <tr>
    <td height="29" colspan="7" bgcolor="#CCFFFF">&nbsp;&nbsp;<span class="STYLE11">直辖市</span> </td>
  </tr>
  <tr>
    <td width="254" align="right" class="STYLE12" id="chkbeijin"
                  onMouseOver="this.style.backgroundColor='#FF3FFF',this.style.color='#FFFFFF', displayCity('北京市')"
                  onMouseOut="this.style.backgroundColor='',this.style.color='',hiddenCity()">
      <input type="checkbox" name="checkbox" value="北京" >
北京</td>
    <td width="321" class="STYLE12" 
                  onMouseOver="this.style.backgroundColor='#FF3FFF',this.style.color='#FFFFFF',displayCity('上海市')" 
                  onMouseOut="this.style.backgroundColor='',this.style.color='', hiddenCity()"><label>
      <input type="checkbox" name="checkbox4" value="checkbox" >
    上海</label></td>
  </tr>
</table>
</body>
</html>这是我的问题代码，请各位大虾帮忙解决一下！！

解决方案 »

  1.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script language="javascript" type="text/javascript">
    function getAbsPos( oId, tl ) {
    var o = ((typeof oId) == 'String') ? document.getElementById( oId ) : oId;
    var val = 0;
    while ( o.tagName.toLowerCase() != "body") {
    val += (tl == 'top') ? parseInt( o.offsetTop ) : parseInt( o.offsetLeft );;
    o = o.parentNode;
    }
    return val;
    }
    //省份城市控件
    function displayCity(cityName, obj)
    {
    switch(cityName)
    {
      case"北京市":
            document.getElementById("divCityname").innerHTML="<table  align='center' cellpadding='0' cellspacing='0'><tr><td><input type='checkbox' name='checkbox' value='海淀区'>海淀区</td><td><input type='checkbox' name='checkbox' value='朝阳区'>朝阳区</td></tr><tr><td><input type='checkbox' name='checkbox' value='大兴区'>大兴区</td><td><input type='checkbox' name='checkbox' value='东城区'>东城区</td></tr><tr><td><input type='checkbox' name='checkbox' value='昌平区'>昌平区</td><td><input type='checkbox' name='checkbox' value='西城区'>西城区</td></tr><tr><td><input type='checkbox' name='checkbox' value='宣武区'>宣武区</td><td><input type='checkbox' name='checkbox' value='丰台区'>丰台区</td></tr><tr><td><input type='checkbox' name='checkbox' value='房山区'>房山区</td><td><input type='checkbox' name='checkbox' value='通州区'>通州区</td></tr><tr><td><input type='checkbox' name='checkbox' value='石景山区'>石景山区</td><td><input type='checkbox' name='checkbox' value='顺义区'>顺义区</td></tr><tr><td><input type='checkbox' name='checkbox' value='近郊'>近郊</td><td>&nbsp;</td></tr></table>";
            document.getElementById("divCityname").style.display= "block";
            break;
    case "上海市":
            document.getElementById("divCityname").innerHTML="<table align='center' cellpadding='0' cellspacing='0'><tr><td><input type='checkbox'name='checkbox' value='黄浦区'>黄浦区</td><td><input type='checkbox' name='checkbox' value='卢湾区'>卢湾区</td><td><input type='checkbox' name='checkbox' value='徐汇区'>徐汇区</td></tr><tr><td><input type='checkbox' name='checkbox' value='长宁区'>长宁区</td><td><input type='checkbox' name='checkbox' value='普陀区'>普陀区</td><td><input type='checkbox' name='checkbox' value='闸北区'>闸北区</td></tr><tr><td><input type='checkbox' name='checkbox' value='虹口区'>虹口区</td><td><input type='checkbox' name='checkbox' value='杨浦区'>杨浦区</td><td><input type='checkbox' name='checkbox' value='浦东新区'>浦东新区</td></tr><tr><td><input type='checkbox' name='checkbox' value='宝山区'>宝山区</td><td><input type='checkbox' name='checkbox' value='嘉定区'>嘉定区</td><td><input type='checkbox' name='checkbox' value='松江区'>松江区</td></tr><tr><td><input type='checkbox' name='checkbox' value='闵行区'>闵行区</td><td><input type='checkbox' name='checkbox' value='近郊区'>近郊区</td><td>&nbsp;</td></tr></table>";
            document.getElementById("divCityname").style.display= "block";
            break;
    }
        document.getElementById("divCityname").style.left= getAbsPos(obj,"left");
        document.getElementById("divCityname").style.top = getAbsPos(obj,"top");}//隐藏城市
    function hiddenCity()
    {
        if(!document.getElementById("divCityname").contains(event.toElement))
        document.getElementById("divCityname").style.display="none";
    }
    </script><!--css样式-->
    <style type="text/css">
    <!--
    #divCityname {    position:absolute;
        overflow: auto;
    }-->
    </style>
    </head>
    <body onLoad="hiddenCity()">
    <div id="divCityname" title="城市选择" style=" background-color:#FFDFFF; border-width:1px; border-style:solid; border-color:#0000FF; font-size:12px;"></div>
    <table width="189" height="62" align="center" cellpadding="0" cellspacing="0">
      
      <tr>
        <td height="29" colspan="7" bgcolor="#CCFFFF">&nbsp;&nbsp;<span class="STYLE11">直辖市</span> </td>
      </tr>
      <tr>
        <td width="254" align="right" class="STYLE12" id="chkbeijin"
                      onMouseOver="this.style.backgroundColor='#FF3FFF',this.style.color='#FFFFFF', displayCity('北京市',this)"
                      onMouseOut="this.style.backgroundColor='',this.style.color='',hiddenCity()">
          <input type="checkbox" name="checkbox" value="北京" >
    北京</td>
        <td width="321" class="STYLE12" 
                      onMouseOver="this.style.backgroundColor='#FF3FFF',this.style.color='#FFFFFF',displayCity('上海市',this)" 
                      onMouseOut="this.style.backgroundColor='',this.style.color='', hiddenCity()"><label>
          <input type="checkbox" name="checkbox4" value="checkbox" >
        上海</label></td>
      </tr>
    </table>
    </body>
    </html>