По той простой причине, что элемент #touch-menu теряет состояние focus раньше, чем проходит клик по элементу списка. Стоит сделать выпадение иными средствами :)
Да, так и должно быть. То, что вы указываете media в теге link, по сути своей аналогично тому, что вы бы использовали @ media внутри css. Браузер загружает все стили, как минимум в виду того, что окружение может измениться
Существует как множество готовых решений - гуглите по запросу grid, так и несколько вариантов реализации без использования сторонних ресурсов: flexbox, display: inline-block, float - расположены они в порядке моих личных предпочтений :) гуглите эти слова и разбирайтесь как работает, если вам интереснее самописный методж решения проблемы
Для того чтобы он работал правильно - нужно задать псевдоэлементу свойство display, например inline-block. То что показывается второй - это магия. Подобную магию вы сможете наблюдать, если в инспекторе хрома поставите первому псевдоэлементу насильно display: block, а потом просто уберете это свойство.
Потому что у картинок-стрелок, как и у тега с цифрами стоит css-свойство float: right и при этом у тега с цифрами указан margin-top: 55px. Подробнее о свойстве float вы можете прочитать по следующей ссылке: htmlbook.ru/css/float
С men и "серым квадратиком" примерно та же самая ситуация. Я бы на вашем месте вообще в данном месте не использовал float.