[CSS][HTML] Menu dla różnych wielkości ekranu Opcje

[szczemp]

Już dawno nic nie kodowałem, aż tu nagle trafiła się fucha.
Mam do przerobienia stronę. Muszę ją dopasować do mniejszych ekranów. Na początek idzie menu. Teraz jest zbudowane na divach o określonych rozmiarach (w procentach). No i menu się dobrze skaluje dla większych ekranów, ale na telefonach się strasznie gmatwa. Mam kilka pomysłów jak to zrobić, ale chciałbym skonsultować jeden z nich. Nie jestem na bieżąco i nie wiem czy ten pomysł jest zgodny ze sztuką i czy będzie miał jakiś wpływ na pozycję w wyszukiwarce.
Pomysł jest taki. Zostawić to menu co jest, opakować go w jakiegoś dodatkowego diva i temu divowi dać media query, żeby na ekranach mniejszych niż tabletowe w ogóle się nie wyświetlał. Napisać drugi raz menu dopasowane dla smartfonów, opakować go w diva i temu divowi dać media query, żeby wyświetlał się tylko na ekranach mniejszych lub równych tabletowym.
Tym sposobem, patrząc w źródło strony, menu będzie zduplikowane. Linki będą się powtarzać, ale będzie do nich prowadzić 'inna ścieżka elementów'. Czy tak się w ogóle tworzy? Swoją drogą często w stopce widać drugie menu i jakoś nikt tym się nie przejmuje.

Za odpowiedzi typu 'dodaj do istniejącego menu szerokość na 100%' podziękuję, bo menu ma kilka poziomów i to nie przejdzie. Trzeba by zrobić je na nowo od razu dla małych i dużych ekranów.

[SmokAnalog]

Takie rozwiązanie z osobnym menu dla małych ekranów jest często spotykane. Jeśli istnieje szansa na pozostanie przy jednym menu, to lepiej. Ale często po prostu się nie da, wtedy robi się drugie menu. Czekam aż CSS będzie na tyle elastyczny, żeby kwestie wyglądu nie spadały po części na HTML. Gdyby trochę dopracować CSS, to żadne sztuczne kontenery i inne gówna nie byłyby potrzebne.