請幫我看下,為什么我的鼠標滑到一級菜單,二級三級菜單都會顯示,我想實現鼠標滑到二級菜單的時候,三級菜單才會顯示
<!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>
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;
? ? ? ? }
? ? ? ? .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>
同學是這個,前面用獵豹瀏覽器復制格式就亂了
2020-04-09
同學試試看這個,照著你的代碼改的