How to show all siblings on :hover in pure CSS - html

Question

Need to select all sibling <li> elements on hover. Tried accepted answer here but it is not working. JSFiddle here
.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;
}
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
<li class="btn"><a>☰</a></li>
<li>Home</li>
<li>Portfolio</li>
<li>Contact
<ul class="sub-menu">
<li>Sub Menu</li>
<li>Sub Menu</li>
</ul>
</li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->

Answer 1

Your problem is the selector:
.menu li:hover ~ .menu li
A hidden element can't be hovered-over, which means that li:hover is never going to match an element. Also, the general-sibling combinator is trying to find (subsequent) siblings that are <li> elements descending from sibling .menu elements. Which matches no elements in the page.
Converting that to the following 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;
}
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
<li class="btn"><a>☰</a>
</li>
<li>Home
</li>
<li>Portfolio
</li>
<li>Contact
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
works; that said it will - because of the general sibling combinator - match only those <li> elements with a preceding <li> sibling, which means it will, and can, never show the first <li>.
So, instead, I'd suggest using:
.menu:hover 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 {
display: block;
}
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
<li class="btn"><a>☰</a>
</li>
<li>Home
</li>
<li>Portfolio
</li>
<li>Contact
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->