Как изменить правило непрозрачности дочернего элемента при наведении, используя только CSS?

Question

Как я могу изменить непрозрачность дочерних li s при наведении курсора на родительском элементе только с использованием основного CSS?

Следующий код изменяет прозрачность при наведении курсора на дочернюю лису, но мне нужно сделать это при наведении курсора на родительскую ли

ul li> ul li{
  background:khaki;
  opacity:0;
}

ul li> ul li:hover{
  opacity:1;

}

<ul>
  <li>App 1</li>
  <li>App
    <ul>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
    </ul>
  </li>
  <li>App 1</li>
  <li>App 1   </li>
      <li> App
    <ul>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
    </ul>
  </li>

</ul>

Answer 1

Переместить :hover к родителю подменю (li:hover > ul):

ul li > ul li {
  background: khaki;
  opacity: 0;
}

ul li:hover > ul li {
  opacity: 1;
}

<ul>
  <li>App 1</li>
  <li>App
    <ul>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
    </ul>
  </li>
  <li>App 1</li>
  <li>App 1 </li>
  <li> App
    <ul>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
    </ul>
  </li>

</ul>