                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /形形色色的下拉菜單

老師好，下拉菜單被其他div塊遮擋

如何使其浮于表面？

Helenyang

2015-04-21

源自：形形色色的下拉菜單

關注問題我要回答

5598

操作

收起

4 回答

不斷滴自我催眠
2015-04-23

你指的是二級菜單被右側的模塊遮擋了？

如果是的話 z-index 是可以解決的啊

給下面兩個樣式增加z-index屬性就可以了，保證菜單欄層級都比右側模塊高

.banner_bar?{
????float:?right;
????left:?300px;
????overflow:?hidden;
????position:?absolute;
????top:?195px;
????z-index:?1;
}
.menu?{
????background-color:?#47CF66;
????border-bottom:?3px?solid?#47CF66;
????left:?100px;
????position:?absolute;
????top:?194px;
????width:?200px;
????z-index:?2;
}

0 回復有任何疑惑可以回復我~

收起回答

Helenyang 提問者

非常感謝！

2015-04-23 回復有任何疑惑可以回復我~

Helenyang 提問者

(⊙o⊙)…好吧！我給那個z-index加了單位px。謝謝！

2015-04-23 回復有任何疑惑可以回復我~

墨伊伊
2015-12-04

老師，請問二級菜單背景顏色在IE里顯示不出是什么問題啊

0 回復有任何疑惑可以回復我~

收起回答

Helenyang 提問者
2015-04-23

/*導航*/

.navBox{height:45px; background-color:#0ab136; color:#FFF;position:relative;z-index:4px;}

.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:#47CF66;margin-top:2px;border-left:none;}

.nav li ul li a:hover{color:#F93;}

.nav li ul{display:none;width:90px;}

.nav li:hover ul{display:block;}

/*商品菜單*/

.bannar{position:absolute;z-index:3px;}

.menu{background-color:#47CF66;width:200px;position:absolute; left:100px; top:194px;border-bottom:#47CF66 solid 3px;z-index:2px;}

.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:#fff;display:none;list-style:none;position:absolute;left:200px;top:auto;width:300px;height:100px;}

.menu li ul li a{color:#000;font:16px/1 "Microsoft YaHei", "微軟雅黑";}

.menu li ul li{float:left;width:60px;height:30px;}

.menu li:hover ul{display:block;}

/*banner部分*/

.banner_bar{float:right;overflow:hidden;position:absolute; left:300px; top:195px;z-index:1px;}

.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{position:absolute;left:100px;}

.shopTit{height:44px; font-family:"Microsoft YaHei", "微軟雅黑"; line-height:44px; margin-bottom:15px;position:relative;top:350px;}

.shopTit h3{font-size:24px; float:left; font-weight:normal;}

.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{margin:15px 0; position:relative;top:350px;}

.shopList .leftArea{width:200px;position:relative;left:-300px;top:-195px;}

.shopList .rightArea{width:898px; border:#0ab136 solid 1px; border-bottom:#0ab136 solid 3px; height:396px; overflow:hidden;}

/*商品列表-右側*/

.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="comWidth clearfix">

? ? ? ? ? ?<div class="shopClass fl">

<h3>商品服務分類</h3>

? ? ? ? ? ? </div>

? ? ? ? ? ? <ul class="nav fl">

? ? ? ? ? ? ? ? <li><a href="#">果蔬市</a>

? ? ? ? ? ? ? ? ? ? <ul>

? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#">果果鮮果店</a></li>

? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#">磊磊水果店</a></li>

? ? ? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? <li><a href="#">超市</a>

? ? ? ? ? ? ? ? ? ? <ul>

? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#">莘莘超市</a></li>

? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#">教育超市</a></li>

? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#">教職工超市</a></li>

? ? ? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? <li><a href="#">書市</a>

? ? ? ? ? ? ? ? ? ? <ul>

? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#">古月軒書店</a></li>

? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#">教育書店</a></li>

? ? ? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? ? ? </li> ?

? ? ? ? ? ? ? ? <li><a href="#">團購</a></li>

? ? ? ? ? ? ? ? <li><a href="#">醫藥館</a></li>

? ? ? ? ? ? ? ? <li><a href="#">二手特賣</a></li>

? ? ? ? ? ? </ul>

? ? ? ?</div>

? ?</div>

? ? ?<div class="banner comWidth clearfix">

? ? ? ? <ul class="menu">

? ? ? ? ? ? <li><a href="#" class="b">水果蔬菜</a>?

? ? ? ? ? ? ? ?<ul>

? ? ? ? ? ? ? ? ? <li><a href="#">蘋果</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">香蕉</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">梨</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">桂圓</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">草莓</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">橙子</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">火龍果</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">小金橘</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">菠蘿</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">西瓜</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">葡萄</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">青瓜</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">小番茄</a></li>

? ? ? ? ? ? ? ?</ul>

? ? ? ? ? ? </li>

? ? ? ? ? ? <li><a href="#" class="b">食品飲料</a>

? ? ? ? ? ? ? ?<ul>

? ? ? ? ? ? ? ? ? <li><a href="#">面包</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">方便面</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">薯片</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">牛奶</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">礦泉水</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">橙汁</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">奶粉</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">餅干</a></li>

? ? ? ? ? ? ? ?</ul>

? ? ? ? ? ?</li>

? ? ? ? ? ? <li><a href="#" class="b">護膚洗浴</a>

? ? ? ? ? ? ? ?<ul>

? ? ? ? ? ? ? ? ? <li><a href="#">爽膚水</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">乳液</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">霜</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">潔面乳</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">隔離霜/乳</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">洗發露</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">沐浴乳</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">護發素</a></li>

? ? ? ? ? ? ? ?</ul>

? ? ? ? ? ? </li>

? ? ? ? ? ? <li><a href="#" class="b">生活用品</a>

? ? ? ? ? ? ? ?<ul>

? ? ? ? ? ? ? ? ? <li><a href="#">臺燈 </a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">小風扇</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">垃圾桶</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">拖鞋</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">水杯</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">飯盒</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">餐具</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">暖水瓶</a></li>

? ? ? ? ? ? ? ?</ul>

? ? ? ? ? ? </li>

? ? ? ? ? ? <li><a href="#" class="b">學習用品</a>

? ? ? ? ? ? ? ?<ul>

? ? ? ? ? ? ? ? ? <li><a href="#">筆記本</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">筆</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">刀</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">透明膠</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">橡皮</a></li>

? ? ? ? ? ? ? ? ? <li><a href="#">尺子</a></li>

? ? ? ? ? ? ? ?</ul>?

? ? ? ? ? ? </li>

? ? ? ? ? ? <li><a href="#" class="b">交通工具</a>

? ? ? ? ? ? ? ?<ul>

? ? ? ? ? ? ? ? ? <li><a href="#">自行車</a></li>

? ? ? ? ? ? ? ? ? <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>

? ? ? ? ? ? <li><a href="#"><img src="images/banner/banner_02.gif" alt="banner" ?/></a></li>

? ? ? ? ? ? <li><a href="#"><img src="images/banner/banner_03.gif" alt="banner" ?/></a></li>

? ? ? ? ? ? <li><a href="#"><img src="images/banner/banner_04.gif" 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>

0 回復有任何疑惑可以回復我~

收起回答

不斷滴自我催眠
2015-04-22

用css屬性z-index 試試

0 回復有任何疑惑可以回復我~

收起回答

Helenyang 提問者

用了z-index也不管用啊，已經定位

2015-04-23 回復有任何疑惑可以回復我~

不斷滴自我催眠回復 Helenyang 提問者

代碼貼出來看看

2015-04-23 回復有任何疑惑可以回復我~

Helenyang 提問者

已貼代碼，在下面回復中

2015-04-23 回復有任何疑惑可以回復我~

舉報

0/150

提交

取消

形形色色的下拉菜單

參與學習 106932 人
解答問題 563 個

本教程從易到難，循循漸進，運用不同技術實現動態下拉菜單

進入課程

老師好，下拉菜單被其他div塊遮擋

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

老師好，下拉菜單被其他div塊遮擋

4 回答

老師好，下拉菜單被其他div塊遮擋

老師好，下拉菜單被其他div塊遮擋

老師好，下拉菜單被其他div塊遮擋