ie7下子元素设置z-index无效的解决办法

html部分

<div class="nav">
			<ul class="clearfix">
				<li><a href="javascript:void(0)">首页</a></li>
				<li><a href="javascript:void(0)">品牌</a></li>
				<li class="girlwrap">
				<a href="javascript:void(0)">女装</a>			
						<div class="girl">
							<dl class="clearfix">
								<dt>女装:</dt>
								<dd>
									<em><a href="javascript:void(0)">耐克</a></em>
									<em><a href="javascript:void(0)">阿迪达斯</a></em>
									<em><a href="javascript:void(0)">达芙妮</a></em>
									<em><a href="javascript:void(0)">李宁</a></em>
									<em><a href="javascript:void(0)">安踏</a></em>
									<em><a href="javascript:void(0)">奥康</a></em>
									<em><a href="javascript:void(0)">骆驼</a></em>
									<em><a href="javascript:void(0)">特步</a></em>
									<em><a href="javascript:void(0)">耐克</a></em>
									<em><a href="javascript:void(0)">阿迪达斯</a></em>
									<em><a href="javascript:void(0)">达芙妮</a></em>
									<em><a href="javascript:void(0)">李宁</a></em>
									<em class="noborder"><a href="javascript:void(0)">特步</a></em>
								</dd>
							</dl>
							<dl  class="clearfix">
								<dt>女装:</dt>
								<dd>
									<em><a href="javascript:void(0)">耐克</a></em>
									<em><a href="javascript:void(0)">阿迪达斯</a></em>
									<em><a href="javascript:void(0)">达芙妮</a></em>
									<em><a href="javascript:void(0)">李宁</a></em>
									<em><a href="javascript:void(0)">安踏</a></em>
									<em><a href="javascript:void(0)">奥康</a></em>
									<em><a href="javascript:void(0)">骆驼</a></em>
									<em><a href="javascript:void(0)">特步</a></em>
									<em><a href="javascript:void(0)">耐克</a></em>
									<em><a href="javascript:void(0)">阿迪达斯</a></em>
									<em><a href="javascript:void(0)">达芙妮</a></em>
									<em><a href="javascript:void(0)">李宁</a></em>
									<em class="noborder"><a href="javascript:void(0)">特步</a></em>
								</dd>
							</dl>
						</div>
				</li>
				<li class="girlwrap">
				<a href="javascript:void(0)">男装</a>			
						<div class="girl">
							<dl class="clearfix">
								<dt>男装:</dt>
								<dd>
									<em><a href="javascript:void(0)">耐克</a></em>
									<em><a href="javascript:void(0)">阿迪达斯</a></em>
									<em><a href="javascript:void(0)">达芙妮</a></em>
									<em><a href="javascript:void(0)">李宁</a></em>
									<em><a href="javascript:void(0)">安踏</a></em>
									<em><a href="javascript:void(0)">奥康</a></em>
									<em><a href="javascript:void(0)">骆驼</a></em>
									<em><a href="javascript:void(0)">特步</a></em>
									<em><a href="javascript:void(0)">耐克</a></em>
									<em><a href="javascript:void(0)">阿迪达斯</a></em>
									<em><a href="javascript:void(0)">达芙妮</a></em>
									<em><a href="javascript:void(0)">李宁</a></em>
									<em class="noborder"><a href="javascript:void(0)">特步</a></em>
								</dd>
							</dl>
							<dl  class="clearfix">
								<dt>女装:</dt>
								<dd>
									<em><a href="javascript:void(0)">耐克</a></em>
									<em><a href="javascript:void(0)">阿迪达斯</a></em>
									<em><a href="javascript:void(0)">达芙妮</a></em>
									<em><a href="javascript:void(0)">李宁</a></em>
									<em><a href="javascript:void(0)">安踏</a></em>
									<em><a href="javascript:void(0)">奥康</a></em>
									<em><a href="javascript:void(0)">骆驼</a></em>
									<em><a href="javascript:void(0)">特步</a></em>
									<em><a href="javascript:void(0)">耐克</a></em>
									<em><a href="javascript:void(0)">阿迪达斯</a></em>
									<em><a href="javascript:void(0)">达芙妮</a></em>
									<em><a href="javascript:void(0)">李宁</a></em>
									<em class="noborder"><a href="javascript:void(0)">特步</a></em>
								</dd>
							</dl>
						</div>
				</li>
				<li><a href="javascript:void(0)">鞋包配饰</a></li>
			</ul>
		</div>

css部分

 .nav li.girlwrap {
	position: relative;	
	z-index: 150;/*在ie7下一定记住设置了relative的元素记得设置z-index,否则相对这个元素绝对定位的元素会被其他元素遮盖*/
}
.nav li.girlwrap:hover .girl{
	display: block;
}

 .nav li.girlwrap>.girl {
	background: #fff;
	position: absolute;
	top: 35px;
	left: 9px;
	width: 474px;
	height:  auto;
	border-left: 1px solid #666;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	display: none;
	padding: 10px 15px;
	z-index: 150;
}


你可能感兴趣的:(IE)