jQuery控制的嵌套DIV为何外层老是显示在内层，求教

[ma1986]

html:

div id="sidebar">
<h3><a href="search.asp?name=" id="current">全部</a></h3><div class="sidelist"><span><h3><a href="search.asp?name=&area=1" >市中区</a></h3></span>
<div class="i-list"><ul>

<li ><a href="search.asp?name=&area_s=1" >城区</a></li>

<li ><a href="search.asp?name=&area_s=8" >苏稽镇</a></li>

<li ><a href="search.asp?name=&area_s=36" >全福镇</a></li>

<li ><a href="search.asp?name=&area_s=37" >通江镇</a></li>

<li ><a href="search.asp?name=&area_s=40" >土主镇</a></li>

<li ><a href="search.asp?name=&area_s=41" >牟子镇</a></li>

<li ><a href="search.asp?name=&area_s=42" >棉竹镇</a></li>

</ul>
</div></div>
<div class="sidelist"><span><h3><a href="search.asp?name=&area=3" >峨眉山</a></h3></span>
<div class="i-list"><ul>

<li ><a href="search.asp?name=&area_s=5" >绥山镇（城区）</a></li>

<li ><a href="search.asp?name=&area_s=6" >景区</a></li>

</ul>
</div></div></div>

CSS:

*{margin:0;padding:0;}
#sidebar{width:180px;height:auto;margin:0px;padding:0px;font-size:12px;}
#sidebar h3{padding-left:5px;}
.sidelist{position:relative ;z-index:1;height:32px;width:60px; float:left; }
.sidelist span h3{position:relative ;z-index:1;height:32px;line-height:32px;width:60px;font-size:14px;font-weight:normal;overflow:hidden;clear:both}
.sidelist span h3 a{font-size:12px;text-decoration:none;display:block;width:auto;height:auto;color:#000;}
.sidelist span h3 a:hover{color:red;font-weight:bold;clear:both;}
.i-list{display:none;position:absolute; z-index:2;left:60px;top:-20px;width:180px;height:150px;padding:15px;background:#fff;border:1px solid #c30;overflow:hidden; clear:both}
.i-list ul li{width:60px;float:left;list-style:none;line-height:32px;heignt:32px;}
.i-list ul li a{color:#000;text-decoration:none;font-size:12px;}
.i-list ul li a:hover{text-decoration:underline;color:red;}
.hover{border:1px solid #c30;border-right:0;width:80px;background:#fff9ef;}

JQUREY:

$(document).ready(function(){
    $('.sidelist').mousemove(function(){
	$(this).find('.i-list').show();
	$(this).find('h3').addClass('hover');
	});
	$('.sidelist').mouseleave(function(){
	$(this).find('.i-list').hide();
	$(this).find('h3').removeClass('hover');
	});
});

问题：为什么导致外层的内容显示到内层啊？比如：当滑过市中区，弹出框理应只显示下面的镇，为什么里面还出现了峨眉山，有什么办法可以使内层遮挡外层啊，我使用过z-index:2;也不行，请教各位大侠，谢谢！

[ma1986]

补充问题：可能是由于嵌套DIV内层透明导致的，我这里又需要嵌套结构。当鼠标移到下面一级镇的时候，弹出框又会消失，很难，有什么办法控制啊，谢谢！

[ma1986]

如图：

[ma1986]

就没有大哥来回复我的帖子啊 悲剧

[jhrxx]

给个z-index

[ma1986]

大哥 我已经讲的了 z-index不起作用 啊 还是谢谢了

[ma1986]

对了 效果地址在这里http://tong.leshanren.com/search.asp?name=左上角

[beyond_me21]

.sidelist span h3不需要position:relative
同时把所有的.sidelist span h3移动到所有i-list上面放到一起

把所有<div class="i-list"><ul><li ><a href="search.asp?name=&area_s=42" >棉竹镇</a></li？</ul></div>这些内容移动到下面放在一起

[runzili]

这个和jq没有关系，主要是对于定位时的层级关系还没搞明白。
两个都相对绝对定位时，往往是父层relative的z-index起作用。你试着在峨眉山所在的relative层把z-index设置的比前面的小些，前面出现的设置大一点的值。然后依次递减下来就好了。

[ma1986]

7楼大哥，你那样就是让DIV不嵌套，问题又出现了，我下面的乡镇怎么对应啊，可能就要生成不同的DIV id来分别控制了，jQuery也要修改，难！

[beyond_me21]

还有一个方法，修改一个js

$(document).ready(function(){
    $('.sidelist').mousemove(function(){
    $('.sidelist').style.z-index=99999;
    $(this).find('.i-list').show();
    $(this).find('h3').addClass('hover');
    });
    $('.sidelist').mouseleave(function(){
    $(this).find('.i-list').hide();
    $(this).find('h3').removeClass('hover');
    $('.sidelist').style.z-index=1;
    });
});

[幕子丿昔]

你的HTML写的有够差的
楼主对z-index的用法不太了解吧
我也不多讲了 直击你的问题吧
.sidelist{position:relative ;z-index:1;height:32px;width:60px; float:left; }
.sidelist span h3{position:relative ;z-index:1;height:32px;line-height:32px;width:60px;font-size:14px;font-weight:normal;overflow:hidden;clear:both}
.i-list{display:none;position:absolute; z-index:2;left:60px;top:-20px;width:180px;height:150px;padding:15px;background:#fff;border:1px solid #c30;overflow:hidden; clear:both}
↑先把以上三个样式里的z-index属性删掉

$(document).ready(function(){
$('.sidelist').mousemove(function(){
$(this).find('.i-list').show();
$(this).css("zIndex","1");
$(this).find('h3').addClass('hover');
});
$('.sidelist').mouseleave(function(){
$(this).find('.i-list').hide();
$(this).css("zIndex","0");
$(this).find('h3').removeClass('hover');
});
});
↑ 然后把你的JQ加上这两行

[ma1986]

各位兄弟谢谢了，我的问题在大家的帮助下解决了，你们总共给我提了2种解决方案。runzili的是一种，我通过你的解决了问题。beyond_me21和water13th的是另外一种更好的解决方法，只是beyond_me21的jQuery写错了，呵呵。感谢各位的帮助，我要结贴了，只是分不多，大家不好分，请见谅。