js控制div层

Question

有一个导航，希望在鼠标移动到每一个选项的时候能显示出子项目。
但由于不同显示器分辨率的原因，子项目显示的位置不能相对固定。
目前，只针对800*768的实现：
#Layer1{left:40px;}
#Layer2{left:100px;}
#Layer3{left:200px;}
#Layer4{left:300px;}
#Layer5{left:400px;}
#Layer6{left:auto;right:80px;}
#Layer7{left:auto;right:80px;}
jsp页面中：
<div id="Layer2" class="submenu" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')"> 
<div class="">
      <ul>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li class="subright"></li>
      </ul>
    </div>
</div>    
    
<div id="Layer3" class="submenu" onMouseOver="MM_showHideLayers('Layer3','','show')" onMouseOut="MM_showHideLayers('Layer3','','hide')"> 
 <div class="">
  <ul>
      <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
  <li class="subright"></li>
  </ul>
</div>
</div>
<div id="Layer4" class="submenu" onMouseOver="MM_showHideLayers('Layer4','','show')" onMouseOut="MM_showHideLayers('Layer4','','hide')"> 
 <div class="">
  <ul>
      <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li class="subright"></li>
  </ul>
</div>
</div>
<div id="Layer5" class="submenu" onMouseOver="MM_showHideLayers('Layer5','','show')" onMouseOut="MM_showHideLayers('Layer5','','hide')"> 
 <div class="">
  <ul>
      <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li class="subright"></li>
  </ul>
</div>
</div>
<div id="Layer6" class="submenu" onMouseOver="MM_showHideLayers('Layer6','','show')" onMouseOut="MM_showHideLayers('Layer6','','hide')"> 
 <div class="">
  <ul>
      <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li class="subright"></li>
  </ul>
</div>
</div>
<div id="Layer7" class="submenu" onMouseOver="MM_showHideLayers('Layer7','','show')" onMouseOut="MM_showHideLayers('Layer7','','hide')"> 
 <div class="">
  <ul>
      <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li class="subright"></li>
  </ul>
</div>
</div>
希望在不同分辨率下div的相对位置能固定。
恳请各位帮忙！

Answer 1

js 计算 坐标常用的是下面4个属性
offsetTop offsetLeft offsetHeight offsetWidth

Answer 2

现在是通过css给出固定位置参数值。
如果加入js，该如何复制。
导航时居中的，可以在js中通过导航table的id的offsetLeft获取距离左端的值吗？
试过了，不行。
老胡可以说的具体点吗？
谢谢

Answer 3

#Layer1{left:40px;}
#Layer2{left:100px;}
#Layer3{left:200px;}
#Layer4{left:300px;}
#Layer5{left:400px;}
#Layer6{left:auto;right:80px;}
#Layer7{left:auto;right:80px;}写在css文件中

Answer 4

通过js获得了距离左边框的值：
<script type="text/javascript">
    var ml = document.getElementById("menutable");
    alert(ml.offsetLeft);
</script>
如何能和css中已经设定的值：
#Layer1{left:40px;}
#Layer2{left:100px;}
#Layer3{left:200px;}
#Layer4{left:300px;}
#Layer5{left:400px;}
#Layer6{left:auto;right:80px;}
#Layer7{left:auto;right:80px;}
加起来，绑定到每个div上
<div id="Layer2" class="submenu" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')"> 
<div class="">
      <ul>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li class="subright"></li>
      </ul>
    </div>
</div>请求大侠帮忙！