Горизонтальное выпадающее меню CSS для Blogger

     Итак, просто меню на сайте нас перестало устраивать, хотелось бы сделать его более информативным, к каждому пункту меню добавить подпункты.

    Что нужно сделать? Заходим в Блоггер, "Тема" "Настроить" В "Дизайнере шаблонов" добавляем CSS стиль. Нажимаем "Применить к блогу"

    Стили потом подгоним под оформление нашего блога, в частности, фон, цвет текста при наведении, и длину выпадающих пунктов.

.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: 20em; 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);}

    Далее, заходим в Блоггере в "Дизайн", и между заголовком блога и сообщениями добавляем гаджет "Список".

        Для обычного пункта меню в поле "Добавить элемент списка" вписываем:

<a href="адрес_куда_ведёт_Пункт"> текст_Пункта </a>

        Для выпадающего пункта меню в поле "Добавить элемент списка" вписываем:

<a href="адрес_куда_ведёт_Пункт"> текст_Пункта </a>
<a href="адрес_куда_ведёт_Подпункт1"> текст_Подпункта1 </a>
<a href="адрес_куда_ведёт_Подпункт2"> текст_Подпункта2 </a>
<a href="адрес_куда_ведёт_ПодпунктN"> текст_ПодпунктаN </a>

        То есть на практике выглядеть это будет так:

<a> Интересно </a>
<a href="http://www.crimea-up.com/2013/03/krym-peshchernye-goroda.html"> Пещерные города </a>
<a href="http://www.crimea-up.com/2013/03/krym-peshchernye-monastyri-khramy.html"> Пещерные монастыри </a>
<a href="http://www.crimea-up.com/2013/03/krym-dostoprimechatelnosti-pokhody-gory.html"> Разное </a>

     И это только для одной строки. Для другой будет похожее перечисление, но уже с другими ссылками.