Cómo mostrar a todos los hermanos en: hover en CSS puro

Necesita seleccionar todos los elementos hermanos

  • al pasar el mouse. Intentó la respuesta aceptada aquí, pero no está funcionando. JSFiddle aquí

     .menu { margin: 0; padding: 0; list-style: none; overflow: hidden;; background-color: #777; } .menu li { float: none; display: none; } .menu li a { display: block; padding: 10px 20px 10px 20px; text-decoration: none; color: #bbb; } .menu li a:hover { color: #fff; } .menu .btn { display: block; cursor: pointer; } .menu li:hover ~ .menu li{/*ON THIS HOVER NOT SHOWING ALL SIBLIING LIs*/ display: block !important; } 
        

    Tu problema es el selector:

     .menu li:hover ~ .menu li 

    Un elemento oculto no se puede sobrevolar, lo que significa que li:hover nunca coincidirá con un elemento. Además, el combinador de hermanos generales está tratando de encontrar hermanos (subsiguientes) que sean elementos

  • que descienden de elementos hermanos del .menu . Que no coincide con ningún elemento en la página.

    Convirtiéndolo en el siguiente selector:

     .menu:hover li ~ li 
     .menu { margin: 0; padding: 0; list-style: none; overflow: hidden; ; background-color: #777; } .menu li { float: none; display: none; } .menu li a { display: block; padding: 10px 20px 10px 20px; text-decoration: none; color: #bbb; } .menu li a:hover { color: #fff; } .menu .btn { display: block; cursor: pointer; } .menu:hover li ~ li { display: block; }