:focus-within

:focus-within은 포커스를 받은 요소와 그 요소를 포함하는 요소까지 나타냅니다.
<form>필드내에서 하나가 포커스 된 경우 전체를 강조하거나
접근성을 위해 tab키로 메뉴 이동시 메뉴의 하위메뉴가 계속 나타날 수 있게 해줍니다.

 

<ul class="depth1">
  <li><a href="">메뉴1</a>
    <ul class="depth2">
      <li><a href="">뎁스2 - 메뉴1</a></li>
      <li><a href="">뎁스2 - 메뉴2</a></li>
      <li><a href="">뎁스2 - 메뉴3</a></li>
      <li><a href="">뎁스2 - 메뉴4</a></li>
    </ul>
  </li>
  <li><a href="">메뉴2</a>
    <ul class="depth2">
      <li><a href="">뎁스2 - 메뉴1</a></li>
      <li><a href="">뎁스2 - 메뉴2</a></li>
      <li><a href="">뎁스2 - 메뉴3</a></li>
    </ul>
  </li>
  <li><a href="">메뉴3</a></li>
</ul>

 

.depth2 {
  display: none;
}
.depth1 li:focus-within .depth2 {
  display: block;
}

 

jsfiddle에서 보기

jsfiddle.net/hyuckjin/vhxqtwjL/