div层最前面问题

micool 2008-08-25 03:08:22

<div id="menu">
<ul><li><img src="images/one_1_f.gif" /></li>
<li> <a href="aboutuse.asp">About US
</a>

</a>
<ul>
<li><a href="aboutuse.asp">About US</a></li>
<li><a href="companynewse.asp">New</a></li>
<li><a href="jobe.asp">Job</a></li>
</ul>

</li>
<li> <a href="#">Products
</a>

</a>
<ul>
<li><a href="newProduct.asp">New Products</a></li>
<li><a href="mainProduct.asp">Main Products</a></li>
<li><a href="Advantagee.asp">Products</a></li>
<li><a href="helpfore.asp">Help</a></li>
</ul>

</li>
<li> <a href="downloade.asp">Download</a> </li>
<li> <a href="Colleaguee.asp">Cooperation</a> </li>
<li> <a href="guestbooke.asp">Message</a> </li>
<li> <a href="contacte.asp">Contact</a> </li>
<li> <a href="bbse.asp">Forum</a> </li>
<li><img src="images/one_1_e.gif" /></li>
</ul>
</div>

用css控制的导航条
/*menu部分*/
#menu{
clear:both;
}
#menu{
margin:0;
position:relative;
width:765px!important;
}
#menu ul{

list-style:none;
}
#menu li {
position:absolute;
float:left;
position:relative;
}
#menu ul ul {
visibility:hidden;
position:absolute;
z-index:1000;
left:0px;
top:30px;
}
#menu table{
position:absolute;
left:0;
top:0;
}
#menu ul li:hover ul,#menu ul a:hover ul{
visibility:visible;
}
#menu a{
display:block;
text-align:center;
text-decoration:none;
width:100px;
height:30px;
color:#fff;
font: 12px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
line-height:30px;
background-image:url(../images/over.gif);
}
#menu a:hover{
color:#000;
background-image:url(../images/hover.gif);
}
#menu ul ul li {
clear:both;
text-align:left;
position:absolute;
}
#menu ul ul li a{
display:block;
width:100px;
height:30px;
background-image:url(../images/hoverli.gif);
color:#fff;
}
#menu ul ul li a:hover{
background-image:url(../images/hover.gif);
color:#000;
}

但是导航条下拉的不显示在最前面被导航下面的一个div遮掉了

position:absolute; 没用
z-index=auto;或者比较大的值也没用

因为导航条下面的这个div 因为某些元素的原因也要 position:absolute;

怎么解决，让导航条的下拉 <li></li>为最前端的层

...全文

422 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

sxn19811006 2008-08-26

打赏
举报

xuexi

HW_zxc_001 2008-08-26

打赏
举报

web78dy 2008-08-26

打赏
举报

不知道你想要的是不是这种结果:
<!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>
<style type="text/css">

</style>
</head>

<body>
<ul id="menu">
<li><a href="#">About US</a>
<ul>
<li> <a href="#">About US</a> </li>
<li><a href="#">New</a></li>
<li><a href="#">Job</a></li>
</ul>
</li>
<li> <a href="#">Products</a>
<ul>
<li><a href="#">New Products</a></li>
<li><a href="#">Main Products</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Help</a></li>
</ul>
</li>
<li> <a href="downloade.asp">Download </a> </li>
<li> <a href="Colleaguee.asp">Cooperation </a> </li>
<li> <a href="guestbooke.asp">Message </a> </li>
<li> <a href="contacte.asp">Contact </a> </li>
<li> <a href="bbse.asp">Forum </a> </li>
</ul>
<script type="text/javascript">
function initMenu(event,ul){
if(!ul) ul = document.getElementById("menu");
li = ul.getElementsByTagName("li");
for(i=0;i <li.length;i++)
{
li[i].onmouseover = function(){
try{
this.className='over';
this.getElementsByTagName("ul")[0].style.display="block";
}catch(e){};
}
li[i].onmouseout = function(){
try{
this.className='out';
this.getElementsByTagName("ul")[0].style.display="none";
}catch(e){};
}
}
}
window.onload = initMenu;
</script>
</body>

</html>

用于页面加载的前置前面，防止页面还没加载完就被用户点击，或者给用户体验增强。

div style='position:fixed; z-index:999; top:0;'></div>相对浏览器 <div style='position:absolute; z-index:999; top:0;'></div>相对父元素 <div style='position:relative; z-index:999...