老师好，下拉菜单会将下面的div部分顶下去
页面分上中下三部分，下拉菜单属于第一部分，被顶下去的是第二部分，设置了绝对定位也不管用
Helenyang
2015-04-23
3 回答
/*底部*/
.footer{text-align:center; background-color:#f7f7f7; line-height:24px; padding:50px 0;}
/*导航*/
.navBox{height:45px; background-color:#0ab136; color:#FFF;position:relative;z-index:4;}
.shopClass{width:200px;}
.shopClass h3{text-align:center; line-height:45px;}
.nav,.shopClass h3{font-family:"Microsoft YaHei", "微软雅黑";font-size:18px;}
.nav{list-style:none;}
.nav li{float:left;line-height:45px;width:120px;text-align:center;}
.nav a{display:block;color:#FFF; text-decoration:none;}
.nav a:hover{background-color:#47CF66;}
.nav li ul li{float:none;background-color:#ffc;border-left:none;}
.nav li ul li a{color:#0ab136;}
.nav li ul li a:hover{color:#F93;}
.nav li ul{display:none;width:90px;margin-top:2px;}
.nav li:hover ul{display:block;}
/*商品菜单*/
.bannar{position:relative;z-index:3;}
.menu{background-color:#47CF66;width:200px;position:absolute;left:104px; top:194px;border-bottom:#47CF66 solid 3px;z-index:2;}
.menu li{ border-top:#0ab136 solid 1px;text-align:center;}
.menu li .b{font:16px/1 "Microsoft YaHei", "微软雅黑";line-height:53px;}
.menu li a{color:#FFF;text-decoration:none;width:200px;height:53px;}
.menu li a:hover{color:#F93;font-size:24px;display:block;background:url(../images/icon/shop_sj.png) right center no-repeat;}
.menu li ul{background-color:#FFC;display:none;list-style:none;position:absolute;left:120px;top:auto;width:200px;}
.menu li ul li a{color:#0ab136;font:14px/2 "Microsoft YaHei", "微软雅黑";padding:15px 15px;}
.menu li ul li a:hover{background:none;}
.menu li ul li{float:left;border-top:none;}
.menu li:hover ul{display:block;}
/*banner部分*/
.banner_bar{float:right;overflow:hidden;position:absolute;left:304px; top:195px;z-index:1;}
.imgBox li{float:left;}
.imgBox img{display:block;}
.imgNum{position:absolute; left:0;bottom:30px; width:100%; text-align:center;}
.imgNum a{width:20px; height:5px; overflow:hidden; background-color:#FFF; display:inline-block; margin:0 3px;}
.imgNum .active{background-color:#FF7700;}
.banner_big,.banner_big img{width:900px; height:326px;}
.banner_big .imgBox{width:1710px; height:326px;}
.banner_sm,.banner_sm img{width:200px; height:400px;}
.banner_sm .imgBox{width:390px; height:400px;}
/*商品标题*/
.shop{margin-top:350px;}
.shopTit{height:44px; font-family:"Microsoft YaHei", "微软雅黑"; line-height:44px; margin-bottom:15px;}
.shopTit h3{font-size:24px; float:left; font-weight:normal; padding-left:15px;}
.icon{width:44px; height:44px; background:url(../images/icon/shopIcon.jpg) left top no-repeat; float:left;}
.more{float:right; font-family:"宋体";}
.more:hover{text-decoration:underline;}
/*商品列表*/
.shopList .leftArea{width:200px;position:absolute;left:-200px;top:410px;}
.shopList .rightArea{width:898px; border:#999 solid 1px; border-bottom:#0ab136 solid 3px; height:396px; overflow:hidden;}
/*商品列表-右侧*/
.shopList{margin-bottom:15px;}
.shopList_top,.shopList_sm{margin-right:-4px;}
.shop_item{width:224px; border-right:#999 solid 1px;border-bottom:#999 solid 1px;height:279px; text-align:center; font-family:"Microsoft YaHei", "微软雅黑"; float:left;}
.shop_img{height:218px;}
.shop_img img{width:100%; height:218px; display:block;}
.shop_item h3{font-size:16px;}
.shop_item p{font-size:14px; color:#FF7300; line-height:21px;}
/*商品列表-小*/
.shopItem_sm{width:224px; border-right:#999 solid 1px; height:110px; padding-top:6px; float:left;}
.shopItem_smImg{width:95px; height:95px; text-align:center; float:left;}
.shopItem_smImg img{width:95px; height:95px;}
.shopItem_text{padding-top:28px; width:100px; float:left;}
.shopItem_text p{color:#FF7300;}
.shopItem_text h3{font-family:"Microsoft YaHei", "微软雅黑"; font-size:16px; font-weight:normal; color:#181818; line-height:30px;}
<div class="navBox">
<div class="comWidth clearfix">
<div class="shopClass fl">
<h3>商品服务分类</h3>
</div>
<ul class="nav fl">
<li><a href="#">果蔬市</a>
<ul>
<li><a href="#">果果鲜果店</a></li>
</ul>
</li>
<li><a href="#">超市</a>
<ul>
<li><a href="#">莘莘超市</a></li>
</ul>
</li>
</div>
</div>
<div class="banner comWidth clearfix">
<ul class="menu">
<li><a href="#" class="b">水果蔬菜</a>
<ul>
<li><a href="#">苹果</a></li>
</ul>
</li>
<li><a href="#" class="b">护肤洗浴</a>
<ul>
<li><a href="#">爽肤水</a></li> </ul>
</li>
<li><a href="#" class="b">交通工具</a>
<ul>
<li><a href="#">自行车</a></li>
</ul>
</li>
</ul>
<div class="banner_bar banner_big">
<ul class="imgBox">
<li><a href="#"><img src="images/banner/banner_01.png" alt="banner" /></a></li>
</ul>
<div class="imgNum">
<a href="#" class="active"></a><a href="#"></a><a href="#"></a><a href="#"></a>
</div>
</div>
</div>
</div>
<div class="body">
<div class="shop comWidth clearfix">
<div class="shopTit comWidth">
<span class="icon"></span><h3>最新商品</h3>
<a href="#" class="more">更多>></a>
</div>
<div class="shopList comWidth clearfix">
<div class="leftArea">
<div class="banner_bar banner_sm">
<ul class="imgBox">
<li><a href="#"><img src="images/banner/banner_sm_01.jpg" alt="banner"></a></li>
</ul>
<div class="imgNum">
<a href="#" class="active"></a><a href="#"></a><a href="#"></a><a href="#"></a>
</div>
</div>
</div>
<div class="rightArea">
<div class="shopList_top clearfix">
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="imgs/shopimg1.jpg" alt=""></a>
</div>
<h3>xx</h3>
<p>xx</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="imgs/shopImg2.jpg" alt=""></a>
</div>
<h3>xx</h3>
<p>1xx</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="imgs/shopImg3.jpg" alt=""></a>
</div>
<h3>xx</h3>
<p>1xx</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="imgs/shopImg4.jpg" alt=""></a>
</div>
<h3>xx</h3>
<p>1899元</p>
</div>
</div>
</div>
<div class="shopTit comWidth">
<span class="icon"></span>
<h3>最热商品</h3>
<p><a href="#" class="more">更多>></a></p>
</div>
<div class="shopList comWidth clearfix">
<div class="leftArea">
<div class="banner_bar banner_sm">
<ul class="imgBox">
<li><a href="#"><img src="images/banner/banner_sm_01.jpg" alt="banner"></a></li>
</ul>
<div class="imgNum">
<a href="#" class="active"></a><a href="#"></a><a href="#"></a><a href="#"></a>
</div>
</div>
</div>
<div class="rightArea">
<div class="shopList_top clearfix">
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="imgs/shopImg9.jpg" alt=""></a>
</div>
<h3>xx</h3>
<p>xx</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="imgs/shopImg11.jpg" alt=""></a>
</div>
<h3>xx</h3>
<p>1xx</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="imgs/shopImg12.jpg" alt=""></a>
</div>
<h3>xx</h3>
<p>1xx</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p><a href="#">环购网简介</a></p>
</div>
查看1条回复
举报
0/150
提交
取消
