Как показать всех братьев и сестер: наведите курсор на чистый CSS

Вам нужно выбрать все элементы sibling

  • при наведении указателя мыши. Пробовал принять здесь ответ, но он не работает. JSFiddle здесь

     .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; } 
        

    Ваша проблема – селектор:

     .menu li:hover ~ .menu li 

    Скрытый элемент нельзя li:hover , что означает, что li:hover никогда не будет соответствовать элементу. Кроме того, обобщающий комбинатор пытается найти (последующих) братьев и сестер, которые являются

  • элементами, .menu элементов sibling .menu . Что не соответствует элементам на странице.

    Преобразуя это в следующий селектор:

     .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; }