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

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

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

代码:

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <title>position</title>

    <style>

    * {

        padding: 0;

        margin: 0;

    }


    .page {

        width: 100%;

        height: 4043px;

        background: url("mooc.png") center top no-repeat;

    }


    .nav {

        width: 160px;

        height: 205px;

        position: fixed;

        left: 0;

        top: 50%;

        margin-top: -103px;

        font-family: 'Miscrosoft YaHei';

    }


    .nav-li {

        width: 160px;

        height: auto;

        border-bottom: 1px solid #FFF;

        background: #333;

        text-align: center;

        line-height: 40px;

        color: #FFF;

        font-size: 16px;

        cursor: pointer;

    }


    .tit {

        width: 160px;

        height: 40px;

    }


    .nav-li:hover ul {

        display: block;

    }


    .nav-li ul {

        width: 160px;

        height: auto;

        background: #FFF;

        display: none;

    }


    .nav-li ul li {

        width: 160px;

        height: 40px;

        border-bottom: 1px dashed #666;

        color: #333;

        text-align: center;

        line-height: 40px;

        position: relative;

    }


    .nav-li ul li:hover .list-3 {

        display: block;

    }


    .list-3 {

        width: 160px;

        height: auto;

        position: absolute;

        left: 160px;

        top: 0px;

        display: none;

    }


    .list-3Dom {

        width: 160px;

        height: 40px;

        background: #444;

        border-bottom: 1px solid #FFF;

        text-align: center;

        line-height: 40px;

        color: #FFF;

    }

    </style>

</head>


<body>

    <div class="page">

        <div class="nav">

            <div class="nav-li">

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

                <ul>

                    <li>

                        二级栏目

                        <div class="list-3">

                            <div class="list-3Dom">三级栏目</div>

                            <div class="list-3Dom">三级栏目</div>

                            <div class="list-3Dom">三级栏目</div>

                        </div>

                    </li>

                    <li>

                        二级栏目

                        <div class="list-3">

                            <div class="list-3Dom">三级栏目</div>

                            <div class="list-3Dom">三级栏目</div>

                            <div class="list-3Dom">三级栏目</div>

                        </div>

                    </li>

                    <li>

                        二级栏目

                        <div class="list-3">

                            <div class="list-3Dom">三级栏目</div>

                            <div class="list-3Dom">三级栏目</div>

                            <div class="list-3Dom">三级栏目</div>

                        </div>

                    </li>

                </ul>

            </div>

            <div class="nav-li">

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

                <ul>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                </ul>

            </div>

            <div class="nav-li">

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

                <ul>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                </ul>

            </div>

            <div class="nav-li">

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

                <ul>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                </ul>

            </div>

            <div class="nav-li">

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

                <ul>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                    <li>

                        二级栏目

                    </li>

                </ul>

            </div>

        </div>

    </div>

</body>


</html>


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

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

2回答
好帮手慕星星 2020-09-11 18:46:06

同学你好,当前代码是没有问题的,但是新提问的问题代码和此问题代码不一致,可以查看下回答:

https://class.imooc.com/course/qadetail/254076

祝学习愉快!

好帮手慕星星 2020-09-11 12:08:22

同学你好,实现效果没有问题,代码中有5个nav-li元素,所以有5行

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

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

子菜单默认隐藏,移入的时候显示

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

从第二个开始没有三级菜单

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

不太明白同学想表达的意思,建议描述具体一些。

祝学习愉快!

  • 提问者 wt涛 #1
    就是点到2级菜单,应该会显示加隐藏的2及菜单应该有8行,我永远只有5行
    2020-09-11 18:04:11
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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