为什么我的就只显示5行,往下拉下面的就没了?

为什么我的就只显示5行,往下拉下面的就没了?

http://img1.sycdn.imooc.com//climg/5f5af0c009ccf85102460271.jpg

代码:

!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{padding: 0;margin: 0;}

        ul li{list-style: none;}

     .contianer{width: 100%;height: 4043px;

                background: url("./position源码/mooc.png") no-repeat;}

      .sidebar{width: 160px;height: 205px;background: #333;position: fixed;left: 0;top: 0;bottom: 0; margin:auto 0 ;cursor: pointer;}

      

     

      .bar01{width: 160px;height: auto;font-family: "微软雅黑";}

       .p01{font-size: 16px;line-height: 40px;text-align: center;color: #fff;width: 160px;height:40px ;border-bottom: 1px solid #fff;}

       .lever102{width: 160px;height: auto;background-color:#fff;display: none;}

        .p02{text-align: center;line-height: 40px;font-size: 16px;font-family: "微软雅黑";color: #000;height: 40px;border-bottom: 1px dashed #666;position: relative;}

        .bar01:hover .lever102{display: block;}

        .p02:hover ul{display: block;}

        ul{text-align: center;width: 160px;background-color: #333;line-height: 40px;height: auto;position: absolute;top: 0;right: -160px ;display: none;}

        li{width: 160px;height: 40px;border-bottom: 1px #fff solid;color: #fff;}

    </style>

</head>

<body>

    <div class="contianer">

      <div class="sidebar">

          <div class="bar01">

              <div class="p01">慕课网的标题 </div>

              <div class="lever102"> 

                      <div class="p02">二级栏目

                          <ul>

                              <li>三级栏目</li>

                              <li>三级栏目</li>

                              <li>三级栏目</li>

                          </ul>

                      </div>

                      <div class="p02">二级栏目

                        <ul>

                            <li>三级栏目</li>

                            <li>三级栏目</li>

                            <li>三级栏目</li>

                        </ul>

                      </div>

                      <div class="p02">二级栏目

                        <ul>

                            <li>三级栏目</li>

                            <li>三级栏目</li>

                            <li>三级栏目</li>

                        </ul>

                      </div>

              </div>

          </div>

          <div class="bar01">

            <div class="p01">慕课网的标题 </div>

            <div class="lever102"> 

                    <div class="p02">二级栏目

                        <ul>

                            <li>三级栏目</li>

                            <li>三级栏目</li>

                            <li>三级栏目</li>

                        </ul>

                    </div>

                    <div class="p02">二级栏目

                      <ul>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                      </ul>

                    </div>

                    <div class="p02">二级栏目

                      <ul>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                      </ul>

                    </div>

            </div>

        </div>

        <div class="bar01">

            <div class="p01">慕课网的标题 </div>

            <div class="lever102"> 

                    <div class="p02">二级栏目

                        <ul>

                            <li>三级栏目</li>

                            <li>三级栏目</li>

                            <li>三级栏目</li>

                        </ul>

                    </div>

                    <div class="p02">二级栏目

                      <ul>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                      </ul>

                    </div>

                    <div class="p02">二级栏目

                      <ul>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                      </ul>

                    </div>

            </div>

        </div>

        <div class="bar01">

            <div class="p01">慕课网的标题 </div>

            <div class="lever102"> 

                    <div class="p02">二级栏目

                        <ul>

                            <li>三级栏目</li>

                            <li>三级栏目</li>

                            <li>三级栏目</li>

                        </ul>

                    </div>

                    <div class="p02">二级栏目

                      <ul>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                      </ul>

                    </div>

                    <div class="p02">二级栏目

                      <ul>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                      </ul>

                    </div>

            </div>

        </div>

        <div class="bar01">

            <div class="p01">慕课网的标题 </div>

            <div class="lever102"> 

                    <div class="p02">二级栏目

                        <ul>

                            <li>三级栏目</li>

                            <li>三级栏目</li>

                            <li>三级栏目</li>

                        </ul>

                    </div>

                    <div class="p02">二级栏目

                      <ul>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                      </ul>

                    </div>

                    <div class="p02">二级栏目

                      <ul>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                          <li>三级栏目</li>

                      </ul>

                    </div>

            </div>

        </div>



      </div>

    </div>

    

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2020-09-11 18:43:32

同学你好,不是没有了。由于黑色背景色只设置在了父元素sidebar上,而bar01没有设置黑色背景色,所以当移入第一个sidebar时,会有部分sidebar超出父元素,由于sidebar没有设置背景色,所以就看不到了,如下:

http://img1.sycdn.imooc.com//climg/5f5b549b09d367ca02660451.jpg

建议给bar01添加背景色,如下:

http://img1.sycdn.imooc.com//climg/5f5b54c509fa728404720195.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师