请帮我看下,为什么我的鼠标滑到一级菜单,二级三级菜单都会显示,我想实现鼠标滑到二级菜单的时候,三级菜单才会显示

来源:4-2 侧边栏导航跟随案例

鼬神ss

2020-04-07 16:17

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .zed{
            width:160px;
            height:120px;
            position:absolute;
            left:0;
            top:50%;
            margin-top:-60px;
        }
        li{
            list-style:none;
            width:160px;
            height:40px;
            border-bottom:1px solid #ccc;
            background:red;
            text-align:center;
            line-height:40px;
        }
        .faker{
            display:none;
            width:160px;
            height:120px;
            position:absolute;
            left:160px;
            top:50%;
            margin-top:-60px;
        }
        .faker li{
            width:160px;
            height:40px;
            border-bottom:1px solid yellow;
            text-align:center;
            line-height:40px;

        }
        .zed>li:hover{
            background:blue;
        }
        .zed>li:hover ul{
            display:block;
            
        }
        .zed>li:hover ul li{
            background:blue;
        }
        .killer{
            display:none;
            width:160px;
            height:120px;
            position:absolute;
            left:160px;
            top:50%;
            margin-top:-19px;

        }
        .father{
            display:none;
            width:160px;
            height:120px;
            position:absolute;
            left:160px;
            top:50%;
            margin-top:22px;
        }
        .alex{
            display:none;
            width:160px;
            height:120px;
            position:absolute;
            left:160px;
            top:50%;
            margin-top:22px;
        }
        .zed>li .killer li:hover .alex{
            display:block;
        }
        
    </style>
</head>
<body>
    <ul class="zed">
        <li>精品资源
            <ul class="faker">
                <li>魏无羡</li>
                <li>魏婴</li>
                <li>蓝忘机</li>
            </ul>
        </li>
        <li>慕课网
            <ul class="killer">
                <li>html</li>
                <li>css</li>
                <li>javascript
                    <ul class="alex">
                        <li>亚索</li>
                        <li>嘉文四世</li>
                        <li>泰隆</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>编程达人
            <ul class="father">
                <li>马化腾</li>
                <li>李彦宏</li>
                <li>马云</li>
            </ul>
        </li>
    </ul>
</body>
</html>

写回答 关注

2回答

  • qq_Forever浅唱此生_0
    2020-04-09 14:10:08

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <style>

            *{

                margin:0;

                padding:0;

            }

            .zed{

                width:160px;

                height:120px;

                position:absolute;

                left:0;

                top:50%;

                margin-top:-60px;

            }

            li{

                list-style:none;

                width:160px;

                height:40px;

                border-bottom:1px solid #ccc;

                background:red;

                text-align:center;

                line-height:40px;

                position:static;

            }

            .faker{

                display:none;

                width:160px;

                height:120px;

                position:relative;

                left:160px;

    top:-40px

            }

            .faker li{

                width:160px;

                height:40px;

                border-bottom:1px solid yellow;

                text-align:center;

                line-height:40px;

            }

            .alex{

                display:none;

                width:160px;

                height:120px;

                position:absolute;

                left:160px;

                top:50%;

                margin-top:22px;

            }

            .zed>li:hover{

                background:blue;

            }

            .zed>li:hover .faker{

                display:block;

            }

            .zed>li:hover ul li{

                background:blue;

            }

            .faker>li:hover{

                background:blue;

            }

            .faker>li:hover .alex{

                display:block;

            }

            .faker>li:hover ul li{

                background:blue;

            }

        </style>

    </head>

    <body>

        <ul class="zed">

            <li>精品资源

                <ul class="faker">

                    <li>魏无羡</li>

                    <li>魏婴</li>

                    <li>蓝忘机</li>

                </ul>

            </li>

            <li>慕课网

                <ul class="faker">

                    <li>html</li>

                    <li>css</li>

                    <li>javascript

                        <ul class="alex">

                            <li>亚索</li>

                            <li>嘉文四世</li>

                            <li>泰隆</li>

                        </ul>

                    </li>

                </ul>

            </li>

            <li>编程达人

                <ul class="faker">

                    <li>马化腾</li>

                    <li>李彦宏</li>

                    <li>马云</li>

                </ul>

            </li>

        </ul>

    </body>

    </html>

    同学是这个,前面用猎豹浏览器复制格式就乱了

    鼬神ss

    感谢!我知道问题出在哪了,选择器用错了

    2020-04-09 15:14:43

    共 1 条回复 >

  • qq_Forever浅唱此生_0
    2020-04-09 14:06:59
    <!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        *{            margin:0;            padding:0;        }        .zed{            width:160px;            height:120px;            position:absolute;            left:0;            top:50%;            margin-top:-60px;        }        li{            list-style:none;            width:160px;            height:40px;            border-bottom:1px solid #ccc;            background:red;            text-align:center;            line-height:40px;            position:static;        }
            .zed>li:hover{            background:blue;        }        .zed>li:hover .faker{            display:block;        }        .zed>li:hover ul li{            background:blue;        }        .faker>li:hover{            background:blue;        }        .faker>li:hover .alex{            display:block;        }        .faker>li:hover ul li{            background:blue;        }    </style></head><body>    <ul class="zed">        <li>精品资源            <ul class="faker">                <li>魏无羡</li>                <li>魏婴</li>                <li>蓝忘机</li>            </ul>        </li>        <li>慕课网            <ul class="faker">                <li>html</li>                <li>css</li>                <li>javascript                    <ul class="alex">                        <li>亚索</li>                        <li>嘉文四世</li>                        <li>泰隆</li>                    </ul>                </li>            </ul>        </li>
            <li>编程达人            <ul class="faker">                <li>马化腾</li>                <li>李彦宏</li>                <li>马云</li>            </ul>        </li>    </ul></body></html>

    同学试试看这个,照着你的代码改的

css定位 position

老师带你了解CSS中定位的知识,并运用到实际案例中。

49043 学习 · 92 问题

查看课程

相似问题