Aleksandr

А еще можно воспользоваться поиском ))

может это поможет?

codepen.io/sashqa/pen/ENrbbq
как вариант

https://jsfiddle.net/pta95m20/1/

body {padding: 0 20px;}

.menu-main td > .frame-item-menu > div > .title {
     top: -4px
}

Пример
пример
пример
еще
и еще
и еще

https://jsfiddle.net/y5mw96yL/

Я бы на вашем месте например просто ограничил высоту блока и добавил скролл

Используйте псевдоэлементы :after:before
https://jsfiddle.net/ahfgkw3x/

А куда делся класс menu__button ? вместо того, чтобы добавить класс, вы его заменяете.

Я могу предположить, что данная проблема возникает из-за того, что в keyframe у вас прописано
transform: scale3d()
А выше прописывается
transform: rotate()
попробуйте прописать
transform: scale3d() rotate()
То бишь в начала отрабатывает одно свойство, потом другое.

Пропиши для ul.sub-menu {background: #fff;}

html5.by/blog/scroll-effects

Используйте flexbox

Плюсы Canvas:

• Высокая производительность при отрисовке любых 2D объектов.
  
• Стабильная производительность — всё есть пиксель. Производительность падает только при увеличении разрешения изображения.
  
• Лучше всего подходит для создания растровой графики (например, в играх, фракталов и т.п.), редактирования изображений и операций, требующих манипулирования на уровне пикселей.
  

Плюсы SVG:

• Нет зависимости от разрешения — SVG лучше подходит для кроссплатформенных пользовательских интерфейсов, так как позволяет масштабировать изображение при различных разрешениях экрана.
  
• SVG очень хорошо поддерживает анимацию. Элементы могут быть анимированы с использованием описательного синтаксиса или с помощью JavaScript.
  
• Можно получить полный контроль над каждым элементом, используя SVG DOM API в JavaScript.
  
• SVG хранится в формате XML, что предоставляет больше возможностей браузерам по обеспечению доступности SVG документов по сравнению с элементом canvas. Таким образом, SVG выглядит лучшим решением для пользовательских интерфейсов веб-приложений.
  

Минусы Canvas

• Отрисовка основана на пикселях.
  
• Не существует API для анимации. Вам придется прибегать к использованию таймеров и других событий для обновления канвы.
  
• Слабые возможности по рендерингу текста.
  
• Возможно, не самый лучший выбор, когда доступность имеет решающее значение. Канва предоставляет вам поверхность для рисования в выбранном контексте (2D и 3D). Можно указать альтернативный контент внутри элемента canvas, который будет показан браузером при невозможности отображения графики. Кроме того, вы можете выполнить проверку доступности выбранного Canvas API с помощью JavaScript. На основе этого вы можете обеспечить различную функциональность для пользователей браузеров с разной поддержкой HTML 5 Canvas.
  
• HTML 5 Canvas не подходит для создания веб-сайтов или интерфейсов веб-приложений, так как пользовательские интерфейсы обычно должны быть динамическими и интерактивными, а Canvas требует от вас постоянной перерисовки каждого элемента в интерфейсе.
  

Минусы svg

• Низкая скорость рендеринга при увеличении сложности документа (рисунка), так как используется модель DOM
  
• Скорее всего, SVG не подходит для таких приложений как игры. Возможно лучшим выбором будет комбинация HTML Canvas + SVG.
  

Вывод
HTML 5 Canvas следует использовать для:

1. Редактирования изображений: обрезки, изменения размеров, фильтров (удаления эффекта красных глаз, создания эффекта сепии, изменения цветности или яркости)
   
2. Создания растровой графики: визуализации данных, создания фракталов и графиков функций.
   
3. Анализа изображений: создания гистограмм и т.п.
   
4. Создания игровой графики, такой как спрайты и фоны.
   

SVG следует использовать для:

1. Создания пользовательских интерфейсов веб-приложений, независимых от разрешения экрана.
   
2. Высокоинтерактивных анимированных пользовательских интерфейсов.
   
3. Графиков и диаграмм.
   
4. Редактирования векторных изображений.
   

честно скопипастил

vertical-align: middle;
А картинку сделай background

background-attachment

Консоль откройте и посмотрите ошибки.

ограничьте ширину родителя