Адаптировать меню для мобильной версии сайта
 

Добрый день, прошу подсказать как адаптировать меню под мобильную версию сайта.
Сайт построен на платформе blogger.
Мною был применено ниспадающее меню с подпунктами, созданное по инструкции (ссылка на первоисточник).
На десктопах меня это меню очень устраивает.
Реализовано через гаджет blogger "Список"
Каждая цифра - это отдельная строка списка.

Типовой код списка:

1-ая строка.
<a href="ссылка на сайт 1"> Главная </a>
2-ая строка.
<a href="ссылка на сайт 2"> Страница сайта 2 </a>
<a href="ссылка на сайт 3"> Страница сайта 3 </a>

Мною добавлены следующие стили в шаблон блоггера:

.tabs-outer, .tabs .widget ul {overflow: visible;}
.tabs .widget ul::after {content: ""; display: block; clear: both;}
.tabs .widget ul li {position: relative;}
.tabs .widget ul li a:nth-child(n+2) {position: absolute; bottom: -100%; left: 0; z-index: 2000; width: 15em; border-radius: 0; display:none;}
.tabs .widget ul li a:nth-child(3) {bottom: -200%;}
.tabs .widget ul li a:nth-child(4) {bottom: -300%;}
.tabs .widget ul li a:nth-child(5) {bottom: -400%;}
.tabs .widget ul li a:nth-child(6) {bottom: -500%;}
.tabs .widget ul li a:nth-child(7) {bottom: -600%;}
.tabs .widget ul li a:nth-child(8) {bottom: -700%;}
.tabs .widget ul li a:nth-child(9) {bottom: -800%;}
.tabs .widget ul li a:nth-child(10) {bottom: -900%;}
.tabs .widget ul li:hover a {display: inline-block; box-shadow: none; background: rgba(0,61,118,.95);}
.tabs .widget ul li:hover a:hover {color: rgba(66,170,255,1);}

Собственно, если открывать сайт на мобильном телефоне, то меню будет выглядит неадаптивно. Хотелось бы как-то это донастроить.
Мне видятся следующие варианты:
1. Первый вариант, попытаться доработать текущее используемое мною меню в виде гаджета "списка", аналогично тому как это описывается на этом сайте или вот на этом. Мне такие варианты нравятся, однако не знаю реально ли это сделать с учётом подпунктов. Да и вообще затрудняюсь с кодом.
2. Вообще сделать для мобильной версии отдельное меню по типу выбор из списка после клика, как описано на другом сайте. Но опять же возникает, как мне думается, проблема с подпунктами.
И ещё я не знаю как сделать, чтобы это второе меню отображалось только на мобильной версии сайта.
Пытался в блоггер добавить как гаджет HTML этот код.

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>
<option />- Название меню -<option value="http://URL" />Имя URL
<option value="http://URL1" /> Название страницы 1
<option value="http://URL2" /> Название страницы 2option>
<option value="http://URL3" /> Название страницы 3option>
</select></form>

Но как уже сказал, не смог сделать, чтобы он поддерживал подпункты и чтобы отображался только на мобильной версии. Отображается везде и на десктопе тоже.

Очень надеюсь на помощь форумчан.
Заранее спасибо.
p.s. если возможно то пожалуйста поподробнее. Для меня сделать это самостоятельно выглядит пока очень сложно.
В идеале хотелось бы реализовать вариант из первого пункта.

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

sergeyb5,
1) Реально, дружок, реально
2) У тебя большие днищенские селекторы. Если у тебя проектик начнет расти, ты потом загнешься на специфичности и перебивании стилей. И выкинешь ты свой блоггер со своими гаджетами на помойку). Короче браузер медленнее работает с большими селекторами.
3) Тебе надо почитать про медиа-запросы и display: none. Ну там иногда не делают нон, а задают абс позиционирование
4) И язык надо учить...надо...