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;
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

啊哈前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值