How To Show All Siblings On :hover In Pure Css

Need to select all sibling

elements on hover. Tried accepted answer here but it is not working. JSFiddle here

Solution 1:

Your problem is the selector:

.menuli:hover ~ .menuli

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:hoverli ~ li

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

<!--NEED SOLUTION WITHOUT ALTERING HTML --><ulclass="menu"><liclass="btn"><a>&#9776;</a></li><li><ahref="/">Home</a></li><li><ahref="/portfolio">Portfolio</a></li><li><ahref="/contact">Contact</a><ulclass="sub-menu"><li><ahref="/">Sub Menu</a></li><li><ahref="/portfolio">Sub Menu</a></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:hoverli

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  ;
  background-color: #777;
}
.menuli {
  float: none;
  display: none;
}
.menulia {
  display: block;
  padding: 10px20px10px20px;
  text-decoration: none;
  color: #bbb;
}
.menulia:hover {
  color: #fff;
}
.menu.btn {
  display: block;
  cursor: pointer;
}
.menu:hoverli {
  display: block;
}

<!--NEED SOLUTION WITHOUT ALTERING HTML --><ulclass="menu"><liclass="btn"><a>&#9776;</a></li><li><ahref="/">Home</a></li><li><ahref="/portfolio">Portfolio</a></li><li><ahref="/contact">Contact</a><ulclass="sub-menu"><li><ahref="/">Sub Menu</a></li><li><ahref="/portfolio">Sub Menu</a></li></ul></li></ul><!--NEED SOLUTION WITHOUT ALTERING HTML -->