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:

.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>&#9776;</a>
  </li>
  <li><a href="/">Home</a>
  </li>
  <li><a href="/portfolio">Portfolio</a>
  </li>
  <li><a href="/contact">Contact</a>

    <ul class="sub-menu">
      <li><a href="/">Sub Menu</a>
      </li>
      <li><a href="/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: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>&#9776;</a>
  </li>
  <li><a href="/">Home</a>
  </li>
  <li><a href="/portfolio">Portfolio</a>
  </li>
  <li><a href="/contact">Contact</a>

    <ul class="sub-menu">
      <li><a href="/">Sub Menu</a>
      </li>
      <li><a href="/portfolio">Sub Menu</a>
      </li>
    </ul>

  </li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->