Эта заметка нужна для того, чтобы сориентировать начинающего верстальщика. Я в своё время достаточно посидел, решая эту проблему, не могу сказать, что пришёл к каким-то однозначным выводам. Разве что, самый основополагающий: избегать шаблонных решений, в каждом конкретном случае оптимальное решение является нестандартным. Во-первых, если Вы подключаете Bootstrap, у Вас нет таких проблем, меню там по определению адаптивное. А если нет? Я множество раз читал и перечитывал вот эту статью, с радостью и Вам её рекомендую. Естественно - не копировать - изучать. Иногда срабатывают самые топорные, самые глупые варианты. Например, на этом сайте, использовался готовый шаблон и html меню в нём по каким-то причинам было совершенно нестандартным, но и неадаптивным. Следовательно все стандартные способы не подходили, я потратил очень много времени, пытаясь подогнать его подо что-то существующее. А потом прошло время и решение пришло само: создать два меню - одно для десктопной версии, другое - для мобильной. И для экрана шириной меньше 480px просто при помощи media screen десктопное убирать со всеми потрохами, а мобильное - показывать, а для больших экранов - наоборот. Глупо и топорно донельзя, но эффективно.

---