CSS-Kindselektor funktioniert nicht - alle Abkömmlinge des betroffenen Typs

Question

Ich baue ein Menü mit verschachtelten Listen. Ich habe einen Kind-Selektor (#menu-novo li:hover > ul) verwendet, um nur unmittelbare Nachkommen anzuzeigen/zu verbergen, aber es zeigt immer noch alle. Irgendwelche Hilfe dabei?

#menu-novo-container { 
 
    font-family: tahoma, Arial, helvetica, Serif; 
 
    border: 1px solid red; 
 
} 
 

 
#menu-novo { 
 
border: 3px solid green; 
 
} 
 

 
.menu-novo-item { 
 
    border: 3px solid white; 
 
    cursor: pointer; 
 
} 
 

 
.menu-novo-link { 
 
    border: 3px solid yellow; 
 
} 
 

 
.menu-novo-submenu { 
 
    border: 3px solid red; 
 
    display: none; 
 
} 
 

 
#menu-novo li:hover > ul { 
 
    display: block; 
 
} 
 

 
.menu-novo-link { 
 
    display: block; 
 
}

<div id="menu-novo-container"> 
 
    <ul id="menu-novo"> 
 
     <li class="menu-novo-item"> 1 
 
      <ul class="menu-novo-submenu"> 
 
      <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.1</a></li> 
 
      <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.2</a></li> 
 
      <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.3</a></li> 
 
      <li class="menu-novo-item">1.4 
 
       <ul class="menu-novo-sumbenu"> 
 
        <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.1</a></li> 
 
        <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.2</a></li> 
 
        <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.3</a></li> 
 
       </ul> 
 
      </li>    
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>

Ich denke, das eine Tonne downvotes erhalten, weil sie bereits gefragt worden ist, aber auch andere Beiträge meinem Fall nicht helfen, und ich bin immer verzweifelter hier :)

Answer 1

Wenn ich Ihre Frage verstanden, müssen Sie zuerst display: none für die zweite Ebene ul setzen und dann display: block auf schweben der zweiten Ebene li

#menu-novo li ul li ul { 
    display: none; 
} 

#menu-novo li ul li:hover ul{ 
    display: block; 
} 

#menu-novo-container { 
 
    font-family: tahoma, Arial, helvetica, Serif; 
 
    border: 1px solid red; 
 
} 
 

 
#menu-novo { 
 
    border: 3px solid green; 
 
} 
 

 
.menu-novo-item { 
 
    border: 3px solid white; 
 
    cursor: pointer; 
 
} 
 

 
.menu-novo-link { 
 
    border: 3px solid yellow; 
 
} 
 

 
.menu-novo-submenu { 
 
    border: 3px solid red; 
 
    display: none; 
 
} 
 

 
#menu-novo li:hover > ul { 
 
    display: block; 
 
} 
 

 
.menu-novo-link { 
 
    display: block; 
 
} 
 
#menu-novo li ul li ul { 
 
    display: none; 
 
} 
 

 
#menu-novo li ul li:hover ul{ 
 
    display: block; 
 
}

<div id="menu-novo-container"> 
 
    <ul id="menu-novo"> 
 
     <li class="menu-novo-item"> 1 
 
      <ul class="menu-novo-submenu"> 
 
      <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.1</a></li> 
 
      <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.2</a></li> 
 
      <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.3</a></li> 
 
      <li class="menu-novo-item">1.4 
 
       <ul class="menu-novo-sumbenu"> 
 
        <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.1</a></li> 
 
        <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.2</a></li> 
 
        <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.3</a></li> 
 
       </ul> 
 
      </li>    
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>

this helps

Answer 2

Sie haben dieselben Klassen für verschachtelte li und ul hinzugefügt, so dass verschiedene Klassen hinzu, dass

ul { 
 
    list-style: none; 
 
    padding-left:0; 
 
} 
 
#menu-novo-container { 
 
    font-family: tahoma, Arial, helvetica, Serif; 
 
    border: 1px solid red; 
 
} 
 
#menu-novo { 
 
    border: 3px solid green; 
 
} 
 
.menu-novo-item { 
 
    border: 3px solid white; 
 
    cursor: pointer; 
 
} 
 
.menu-novo-link { 
 
    border: 3px solid yellow; 
 
} 
 
.menu-novo-submenu { 
 
    border: 3px solid red; 
 
} 
 
.menu-novo-submenu.child1, 
 
#menu-novo > li:hover > ul.child1 li .child2 { 
 
    display:none; 
 
} 
 
#menu-novo > li:hover > ul.child1, 
 
#menu-novo > li:hover > ul.child1 li:hover .child2 { 
 
    display: block; 
 
} 
 
.menu-novo-link { 
 
    display: block; 
 
}

<div id="menu-novo-container"> 
 
    <ul id="menu-novo"> 
 
    <li class="menu-novo-item"> 1 
 
     <ul class="menu-novo-submenu child1"> 
 
     <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.1</a></li> 
 
     <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.2</a></li> 
 
     <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.3</a></li> 
 
     <li class="menu-novo-item">1.4 
 
      <ul class="menu-novo-sumbenu child2"> 
 
      <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.1</a></li> 
 
      <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.2</a></li> 
 
      <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.3</a></li> 
 
      </ul> 
 
     </li>    
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 3

Es zeigt alle von ul, weil Sie nicht verstecken (Anzeige: keine;) für Kinder ul. So fügen Sie unter CSS fehlt und funktionieren sollte:

#menu-novo li ul { 
    display:none; 
} 

#menu-novo li:hover > ul { 
    display: block; 
} 

Answer 4

#menu-novo-container { 
 
    font-family: tahoma, Arial, helvetica, Serif; 
 
    border: 1px solid red; 
 
} 
 

 
#menu-novo { 
 
    border: 3px solid green; 
 
} 
 

 
.menu-novo-item { 
 
    border: 3px solid white; 
 
    cursor: pointer; 
 
} 
 

 
.menu-novo-link { 
 
    border: 3px solid yellow; 
 
} 
 

 
#menu-novo li>ul { 
 
    border: 3px solid red; 
 
    display: none; 
 
} 
 

 
#menu-novo li:hover>ul { 
 
    display: block; 
 
} 
 

 
.menu-novo-link { 
 
    display: block; 
 
}