Андрей Верх

Автор его вероятно выложил не для красоты, а для того чтоб его верстали. Поэтому вполне логично, что использовать можно как угодно, с сохранением информации о авторе макета.

img + ul {display:none}
img:hover + ul {display:block}

<img src="">
<ul>
<li>меню</li>
<li>меню</li>
</ul>

В таких случаях, проще вообще ссылку не использовать и заменить её на SPAN или DIV

У вас 0.1 секунда задана, какая она ещё может быть...

transition: 1s linear

В Буцтрпе, например задают 10px, хотя раньше было 62.5%. Вероятно так более надёжно...Принципиальной разницы не вижу, т.к. людей меняющих настройки браузера(где они вообще), вероятно не существует.

По поводу Rem'ов: они лучше чем пиксели и удобнее чем em'ы, но больших плюсов в повсеместном применении нет. Чудес вроде "установлю font-size:8px при адаптивности и всё будет супер", увы не произойдёт.

Вы в курсе, что уже множественные бэкграунды есть?
Что-то вешать на body не очень хорошая идея само по себе. Вешайте на другие контейнеры...футер или шапку, например.

А для того что убрать элемент под родителя, before/after должны иметь z-index:-1 и родитель не должен иметь z-index'a

multiple - это и есть селект для тех у кого отключен JS.
Не нужно пытаться писать костыли для 0.01% посетителей.

CSS COMB

Для основного контейнера с белым фоном:
transform:skewX(20deg)

Для вложенной стрелки:
transform:skewX(-20deg)