Кстати, обрати внимание, что вот это можно было и

Кстати, обрати внимание, что вот это можно было и не писать. 
  ${({ opened }) => {
    if (opened) {
      return css`
        display: block;
      `
    } else {
      return css`
        display: none;
      `
    }
  }}

Можно было вместо этого 
<DropdownMenuItemStyled opened={citiesOpened}>
  {children}
</DropdownMenuItemStyled>
написать так: 
{citiesOpened ? 
  <DropdownMenuItemStyled>
    {children}
  </DropdownMenuItemStyled> : 
  null
}
То есть если citiesOpened есть (в нашем случае === true), то выводить субменю. Если нет, то не выводить. Тогда и в стилях нам не надо рулить с display: none; (ну нет же выводимых элементов, значит и скрывать ничего не надо). И это другой способ реализации твоей задачи, при чем проще и довольно распространенный. Но здесь есть большое и важное отличие, почему я именно такой и показал. В первом случае (как у нас сейчас сделано), можно добавить всякие анимационные штучки (типа плавного открытия/закрытия и т.п.), потому что у нас субменю всегда есть, только атрибуты у него меняются. Во втором же случае субменю то есть, то нету, то есть она в пограничные моменты мгновенно появляется и мгновенно исчезает. В таком случае добавить какую-либо аниманию очень сложно становится. Но это не означает, что второй вариант не годится вообще. В тех случаях, где анимация и прочие такие вещи не нужны, второй вариант предпочтительней даже, потому что мокращает объем DOM, ведь в первом случае мы всегда отрисовываем кучу li-элементов (просто прячем за display: none), а во втором случае элементов нет вообще, что снижает нагрузку на рендеринг. Пометь себе это как-нибудь. 