ModestesGonze

Префиксы нужны.

@-webkit-keyframes spin{

}

.squere{
	-webkit-animation-name: spin;
	-webkit-animation-duration: 2s;
}

Пользуйся сайтом caniuse, будешь знать что поддерживается.

Используй % или vh/vw

Анимация состоит из кадров, соответственно, если требуется более тонкое управление анимацией, то используем animation, т.е.keyframes и промежуточные значения.
А для простой анимации transition.
Проще говоря:
transition - для анимации "старт-финиш"
animation- для анимации в которой нужно управлять кадрами

Попробуй включить аппаратное ускорение

.dropmenu {
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    transform: translatez(0);
}

habrahabr.ru/post/202358
habrahabr.ru/company/yandex/blog/239169

Уберите row как советует barkalov и сложите блоки в один контейнер, только вместо float используйте

display: inline-block;
vertical-align: top;

так у вас хоть будет контроль над последовательностью блоков

На коленке как то так jsfiddle.net/e28H9
Немного доделал, косяк в прокрутке был. jsfiddle.net/e28H9/1

Так?
Для равномерного распределения пунктов меню, задаешь для родителя (ul) display: table; а для потомков (li) display: table-cell;

Этого вполне хватает, лично для меня.
https://github.com/dypsilon/frontend-dev-bookmarks
css-tricks.com