为什么我的就只显示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>
wt涛 2020-09-11
源自：CSS定位（position）   4-2 侧边栏导航跟随案例
7
收起

正在回答 回答被采纳积分+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
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

为什么我的就只显示5行，往下拉下面的就没了？
8 0 3
select下拉菜单显示的个数可以设置吗？
27 0 3
为什么我的滚动条拉上拉下都会回弹呢？
9 0 6
为什么显示我设置的东西？
18 0 7
老师，为什么我的下拉菜单不显示呢？
20 0 3

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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