                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /css定位 position

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

<!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>

鼬神ss

2020-04-07

源自：css定位 position 4-2

关注问题我要回答

886

操作

收起

2 回答

qq_Forever浅唱此生_0
2020-04-09

<!DOCTYPE html>

<html>

<head>

<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>

<li>精品资源

</ul>

</li>

<li>慕课网

<li>javascript

</ul>

</li>

</ul>

</li>

<li>编程达人

</ul>

</li>

</ul>

</body>

</html>

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

0 回复有任何疑惑可以回复我~

收起回答

鼬神ss 提问者

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

2020-04-09 回复有任何疑惑可以回复我~

qq_Forever浅唱此生_0
2020-04-09

<!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>

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

0 回复有任何疑惑可以回复我~

收起回答