MapView с ItemizedOverlay и прокруткой карты

Проблема заключается в CSS-специфичности .
Селектор этого правила

#menu #sm-menu:checked~.menu2 li {
  animation: menu 1.5s;
  animation-fill-mode: forwards;
}

на сильнее , чем этот

#menu .menu2 ul li:nth-child(2) {
  animation-delay: .3s;
}

, поэтому он переопределяет его и использует свойство сокращения animation переопределяет animation-delay в следующих правилах.

У вас есть два решения:
- Лучшее: сделайте приведенные ниже правила более строгими, как это (улучшенная версия вашего CSS):

#sm-menu:checked~.menu2 li {
  animation: menu 1.5s;
  animation-fill-mode: forwards;
}

@keyframes menu {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(300px);
  }
}

#menu .menu2 li:nth-child(2) {
  animation-delay: .3s;
}

#menu .menu2 ul li:nth-child(3) {
  animation-delay: .6s;
}

#menu .menu2 ul li:nth-child(4) {
  animation-delay: .9s;
}

#menu .menu2 ul li:nth-child(5) {
  animation-delay: 1.2s;
}

• Вторым грубым является использование правила !important, которое является исключением, которое переопределяет любой другой селектор, подобный этому.

Примечание: всегда лучше использовать как можно более краткие селекторы.