关于导航菜单显示的问题

Question

HTMML代码如下：<div class='Nav' id="td_">  
<li>  
  <a href="">首页</a></li>  
<li>  
  <a href="">产品</a>  
  <table><tr><td>  
    <a href="" id="tb_1">商业智能</a>  
    <a href="" id="tb_2">办公自动化</a>
  </td></tr></table>  
  </li>  
  <li>  
  <a href="">客户服务</a>  
  <table><tr><td>  
    <a href="" id="tb_1">技术支持</a>
<a href="" id="tb_2">留言反馈</a>
<a href="" id="tb_3">在线帮助</a>
  </td></tr></table>  
  </li>
</div> 
CSS代码如下：.Nav {
z-index:5;
}  
.Nav li{  
  float:left;  
  display:block;  
  position:relative;  
}  
.Nav a{  
  float:left;  
  display:block;  
  position:relative;  
  padding:2px 10px 2px 10px;  
  font-size:13px;  
  text-decoration: none;  
}  
.Nav li a:hover  
{  
  color:#ffffff;  
  background:#ea0000;  
}  
.Nav li table {  
  display:none;  
  border-collapse:collapse;  
}  
.Nav li:hover table, .Nav a:hover table {  
  display:block;  
  position:absolute;  
  top:18px;  
  left:0;  
  background:#ea0000;  
}  
.Nav li:hover table a, .Nav a:hover table a {  
  float:none;  
  background:#f2f2f2;  
  color:#000;  
  width:120px;  
  border-bottom:1px solid #fff;  
}  
.Nav li:hover table a:hover, .Nav a:hover table a:hover {  
  background:#565656;  
  color:#fff;  
}JAVASCRIPT代码如下：function getOffsetTop (el, p) {
    var _t = el.offsetTop;
    while (el = el.offsetParent) {
        if (el == p) break;
        _t += el.offsetTop;
    }
    return _t;
};
function getOffsetLeft (el, p) {
    var _l = el.offsetLeft;
    while (el = el.offsetParent) {
        if (el == p) break;
        _l += el.offsetLeft;
    }
    return _l;
};
var tt;
var curMenu;
function mouseover (th, menu) {
    if (tt) clearTimeout(tt);
    displayMenu(false);
    menu = document.getElementById('menu' + menu);
    menu.style.left = getOffsetLeft(th) + 'px';
    menu.style.top = getOffsetTop(th) + th.offsetHeight + 'px';
    curMenu = menu;
    displayMenu(true);
}
function mouseout () {
    tt = setTimeout('displayMenu(false)', 200);
}
function _mouseover () {
    if (tt) clearTimeout(tt);
    displayMenu(true);
}
function _mouseout () {
    displayMenu(false);
}
function displayMenu (display) {
    if (curMenu) {
        curMenu.style.display = display ? 'block' : 'none';
    }
}
我想让出来的二级菜单显示在最前面，在我的页面上有个用DIV做的图片切换的相关。这个效果会覆盖掉我的二级菜单，请教下高手该如何修改！！

Answer 1

.Nav {
     position: absolute;
z-index:5;
}  
.Nav li{  
  float:left;  
  display:block;  
  position:relative;  
}  
.Nav a{  
  float:left;  
  display:block;  
  position:relative;  
  padding:2px 10px 2px 10px;  
  font-size:13px;  
  text-decoration: none;  
}  
.Nav li a:hover  
{  
  color:#ffffff;  
  background:#ea0000;  
}  
.Nav li table {  
  display:none;  
  border-collapse:collapse;  
}  
.Nav li:hover table, .Nav a:hover table {  
  display:block;  
  position:absolute;  
  z-index: 999;
  top:18px;  
  left:0;  
  background:#ea0000;  
}  
.Nav li:hover table a, .Nav a:hover table a {  
  float:none;  
  background:#f2f2f2;  
  color:#000;  
  width:120px;  
  border-bottom:1px solid #fff;  
}  
.Nav li:hover table a:hover, .Nav a:hover table a:hover {  
  background:#565656;  
  color:#fff;  
}想让元素在某元素之上显示就要加样式
position: absolute;
z-index:5;
这2个是一起出现，才有效果。z-index越大就越靠上面