Нацельтесь на все деления двумя слоями ниже

Question

Я пытаюсь установить для всех элементов div «два слоя ниже» значение display: block, когда пользователь наводит курсор на элемент. Следующий код работает, однако, я просто хочу нацелить два div, которые на два уровня вниз. Причина, по которой мне нужно обновиться, чтобы настроить таргетинг на divs, который находится на двух уровнях вниз, заключается в том, что это многоуровневое выпадающее меню, поэтому HTML генерируется рекурсивно.

Мой код выглядит следующим образом, любые вопросы, дайте мне знать.

const ListItem = styled(div)`
   position: relative;
   &:hover {
      & * {
        display: block;
      }
   } 
`

... Component ....
return (
   <ListItem>
      <p>Example</p>
      <div className='wrapper'>
          // I want to set these 2 divs to `display: block`
          <div style={{display: 'none'}}>
            <p>One</p>
          </div>
          <div style={{display: 'none'}}>
              <p>Two</p>
          </div>
      </div>
   <ListItem>
);

Answer 1

Это должно сработать

const ListItem = styled(div)`
   position: relative;
   &:hover {
      & > .wrapper > div {
        display: block;
      }
   }
`

Answer 2

Можете ли вы дать ListItem класс или идентификатор?Тогда я бы использовал только простой CSS-код, который мог бы работать следующим образом:

<ListItem className='list'>
  <p>Example</p>
  <div className='wrapper'>
      <div>
        <p>One</p>
      </div>
      <div>
          <p>Two</p>
      </div>
  </div>
<ListItem>

CSS:

.list .wrapper > div {
  display: none;
}

.list:hover .wrapper > div {
  display: block;
}