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

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

来源：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>
同学是这个，前面用猎豹浏览器复制格式就乱了

1 0

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

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

0 0

css定位 position

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

49044 学习 · 92 问题

查看课程

相似问题

请帮我看一下，为什么我的二级栏目不能出现在标题的下面

回答 1

我写的三级菜单，和老师的稍微有出入，要学习的可以看看（评论里面写不了这么多字，才过来的）

回答 2

我的二级栏目不能居中

回答 1

代码一样，为什么三级栏目没有显示白色的下划线呢？

回答 5

三级目录不能隐藏

回答 1

打开慕课网App查看更多内容