qq_45735316
2020-06-17 09:14
采纳率: 100%
浏览 381
已采纳

为什么下拉列表设置了z-index还是被其他div挡住了?z-index该在哪里设置?设置为多少?

图片说明图片说明
//index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>the final project</title>
        <link rel="stylesheet" href="css/finalproject.css" />
        <script src="js/finalproject.js" ></script>
        <style>
            *{
                padding:0px;
                margin:0px;
            }


            .bkgimg
            {
                background-image: url("img/b.jpg");
                background-repeat: repeat;
            }
        </style>
    </head>
    <body onload="chk()" class="bkgimg">
        <center>



            </br>
            <!--书籍系列介绍start-->
            <div id="Bseries">
                <span id="AT" style="margin-left: 0px;">书籍系列</span>
            </br>
                <div id="BS1">
                    <ul>


                    <div class="book" id="B1">

                        <li>
                            <span class="namespan">第一卷 七星鲁王</span>
                            <ul>
                                <li><a href="#">第一章 血尸</a></li>
                                <li><a href="#">第二章五十年后</a></li>
                                <li><a href="#">第三章 瓜子庙</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>

                    </div>
                    <div class="book" id="B2">
                        <li>
                            <span class="namespan"> 第二卷 怒海潜沙</span>
                            <ul>
                                <li><a href="#">第一章 蛇眉铜鱼</a></li>
                                <li><a href="#">第二章 双层墓墙</a></li>
                                <li><a href="#">第三章 大风暴</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>
                    </div>
                    <div class="book" id="B3">
                        <li>
                            <span class="namespan">第三卷 秦岭神树</span>
                            <ul>
                                <li><a href="#">第一章 老痒出狱</a></li>
                                <li><a href="#">第二章 六角铃铛</a></li>
                                <li><a href="#">第三章 跟踪</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>
                    </div>
                    </ul>


                </div>
                </br>
                <div id="BS2">
                    <ul>
                    <div class="book" id="B4">
                        <li>
                            <span class="namespan">第四卷 云顶天宫(上)</span>
                            <ul>
                                <li><a href="#">第一章 新的消息</a></li>
                                <li><a href="#">第二章 二零零七第一炮</a></li>
                                <li><a href="#">第三章 镜儿宫</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>
                    </div>
                    <div class="book" id="B5">
                        <li>
                            <span class="namespan">第五卷 云顶天宫(下)</span>
                            <ul>
                                <li><a href="#">第一章 五圣雪山</a></li>
                                <li><a href="#">第二章 自杀行为</a></li>
                                <li><a href="#">第三章 雪崩</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>
                    </div>
                    <div class="book" id="B6">
                        <li>
                            <span class="namespan">第六卷 蛇沼鬼城(上)</span>
                            <ul>
                                <li><a href="#">第一章 三叔的醒来</a></li>
                                <li><a href="#">第二章 往事不堪回首</a></li>
                                <li><a href="#">第三章    WHO ARE YOU?</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>
                    </div>
                    </ul>
                </div>

                </br>
                <div id="BS3">
                    <ul>
                    <div class="book" id="B7">
                        <li>
                            <span class="namespan">第七卷 蛇沼鬼城(中)</span>
                            <ul>
                                <li><a href="#">第一章 稀客</a></li>
                                <li><a href="#">第二章 新的线索</a></li>
                                <li><a href="#">第三章 录像带里的老宅</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>
                    </div>
                    <div class="book" id="B8">
                        <li>
                            <span class="namespan">第八卷 蛇沼鬼城(下)</span>
                            <ul>
                                <li><a href="#">第一章 追击</a></li>
                                <li><a href="#">第二章 消失了</a></li>
                                <li><a href="#">第三章 信号烟</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>
                    </div>
                    <div class="book" id="B9">
                        <li>
                            <span class="namespan"> 第九卷 迷海归巢</span>
                            <ul>
                                <li><a href="#">第一章 集结号</a></li>
                                <li><a href="#">第二章 深入</a></li>
                                <li><a href="#">第三章 记号</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>
                    </div>
                    </ul>
                </div>
                </br>
                <div id="BS4">
                    <ul>
                    <div class="book" id="B10">
                        <li>
                            <span class="namespan">第二季之邛笼石影</span>
                            <ul>
                                <li><a href="#">第一章 兜圈</a></li>
                                <li><a href="#">第二章 老档案</a></li>
                                <li><a href="#">第三章 笔迹</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>
                    </div>
                    <div class="book" id="B11">
                        <li>
                            <span class="namespan">大结局(上)</span>
                            <ul>
                                <li><a href="#">第一章 吴邪心中的另一个人</a></li>
                                <li><a href="#">第二章 由内而外的破绽</a></li>
                                <li><a href="#">第三章 王八邱</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>
                    </div>
                    <div class="book" id="B12">
                        <li>
                            <span class="namespan">大结局(下)</span>
                            <ul>
                                <li><a href="#">第一章 张起灵这个名字的意义</a></li>
                                <li><a href="#">第二章 张启山其人</a></li>
                                <li><a href="#">第三章 所有人都死了</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>
                    </div>
                    </ul>
                </div>
                </br>
                <div id="BS5">
                    <ul>
                        <div class="book" id="B13">
                        <li>
                            <span class="namespan">后续系列</span>
                            <ul>
                                <li><a href="#">《藏海花》系列</a></li>
                                <li><a href="#">《沙海》系列</a></li>
                                <li><a href="#">《重启》系列</a></li>
                                <li><a href="#">……</a></li>
                            </ul>
                        </li>
                        </div>
                    </ul>
                </div>
            </div>
            <!--书籍系列介绍end-->


        </center>
    </body>
</html>

///.css

#Bseries
{
    width:90%;
}
.book{
    width:250px;
    height:50px;
    line-height: 50px;
    background-color: #ccc;
    color:#1a1d22;
    font-size: 20px;
    font-weight: bold;
    font-family: "微软雅黑";
}
#BS1,#BS2,#BS3,#BS4,#BS5{
    width:100%;
    height:50px;
}
#B1,#B4,#B7,#B10,#B13
{
    float:left;
}
#B2,#B5,#B8,#B11
{
    float:left;
    margin-left: 130px;
}
#B3,#B6,#B9,#B12
{
    float:right;
}
ul li ul{
                display:none;
                z-index: 10;
            }
            div ul li:hover ul{
                display:block ;
                font-weight: bold;
                z-index: 10;
            }
            div ul li:hover span{

                font-weight: bold;
                font-size: 20px;
                color:antiquewhite;
                background-color: #495E6F;
                border-radius: 2px;
                z-index: 10;
            }
            div ul li ul li{
                background-color: #c0c0c0;
                color:#1A1D22;
                width:250px;
                z-index: 10;
            }
li{
                list-style-type: none;
                width:250px;
                height:50px;
                line-height: 50px;
                align-content: center;
                z-index: 1;
            }
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 一只成序源 2020-06-17 11:05
    已采纳

    老哥,从昨天问到今天了。其实就是解决z-index没生效问题。只需要在
    ul li ul{
    display:none;
    z-index: 10;
    }
    这里加上一行代码即可解决。
    ul li ul{
    display:none;
    z-index: 10;
    position: relative;
    }

    评论
    解决 无用
    打赏 举报
查看更多回答(1条)

相关推荐 更多相似问题