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