Проблема, когда анимация перекрывает другой блок, может быть исправлена с помощью использования CSS свойства z-index. Также необходимо убедиться, что у перекрываемого блока установлено свойство position: relative или position: absolute.
Что касается проблемы с выскальзыванием меню под футер, необходимо также использовать свойство z-index для задания правильного порядка слоев. Установите на футер z-index с более высоким значением, чем у меню.
Если изменение z-index и position не помогает, можно попробовать использовать свойство transform: translateZ(0) для элементов, чтобы создать новый собственный слой и изменить порядок отображения.
Другой возможный способ решения проблемы - использование flexbox или grid для задания правильного порядка элементов и управления их положением.
Помимо этого, убедитесь, что меню имеет достаточно места для разворачивания. Если вы добавили обертку с overflow: hidden, убедитесь, что ее высота корректно рассчитана и что она не обрезает меню.