为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/形形色色的下拉菜单

老师好，下拉菜单被其他div块遮挡

如何使其浮于表面？

Helenyang

2015-04-21

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

关注问题 我要回答
5545
操作
收起

正在回答

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 回复 有任何疑惑可以回复我~
收起回答
#1

Helenyang 提问者

非常感谢！
2015-04-23 回复 有任何疑惑可以回复我~
#2

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="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>

                       <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 回复 有任何疑惑可以回复我~
收起回答
#1

Helenyang 提问者

用了z-index也不管用啊，已经定位
2015-04-23 回复 有任何疑惑可以回复我~
#2

不断滴自我催眠 回复 Helenyang 提问者

代码贴出来看看
2015-04-23 回复 有任何疑惑可以回复我~
#3

Helenyang 提问者

已贴代码，在下面回复中
2015-04-23 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
形形色色的下拉菜单
  • 参与学习       106972    人
  • 解答问题       543    个

本教程从易到难，循循渐进，运用不同技术实现动态下拉菜单

进入课程

老师好，下拉菜单被其他div块遮挡

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信