Горизонтальное меню на сторонних шаблонах

Еще вариант горизонтального меню с выпадающими вкладками. На родных шаблонах блоггер можно добавить гаджет над заголовком, или у кого в футере есть возможность добавить гаджет на всю ширину блога. Если установите под заголовком, где обычно меню "страницы", расположение вкладок изменится, настроить трудно. Надо в шаблоне удалять настройки PageList. Посмотрите в демо(https://experiment-u.blogspot.com/) пример меню на родном шаблоне в футере внизу. А это скриншот: Код для копирования <style> #main-nav { width: 100%; background: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfMSgFOylogBiMO6HvcSZkZbsB9gp0HxjuerZC21OLxzdcgtnC3tkmxBp-p4-7nXr3icABaDDL3xNQTPVTCyCNLDsfWsnBbAmW2K6EN28rD_IwD0FF3IDl4GUWmjAnJFPFS2r4jz9-ibEp/s1600/main-nav-back.png[/url]); } ul#main-nav li {     float: left;     position: relative;     display: inline; } ul#main-nav li a {     position: relative;     width: 110px;     height: 26px;     display: block;     background: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71KUlAgY94GOoUj-y4R2LVHrooKSoAdZB-nHJeihnN9i9gEW7td-6Pw0OPHw_Uor3eyVXJNVykffy0kkyI1jRRgA8tAE_Of02Or1Z9hmZ-jDGeiGR1So66mpzazNTDReErPu2Cv8m67E-/s1600/menuback4.png[/url]);     background-position: center center;     color: #404040;     text-decoration: none;     font-family: arial;     font-size: 14px;     padding-top: 12px;     text-align: left;     padding-left: 26px;     font-weight: normal;     text-shadow: 0 0.6px 0 rgba(255, 255, 255, 0.2), 0 -0.6px #000; } ul#main-nav li.home a { background-image: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaZM1wtEcNroIQ7sqSpK0g7KGWuCcFlxiZ7gFChhfEW5WuAcZrXEvEEf3AGYYnrSgvEyKaSVMqGK6R7tM-MnVKSVG9ASQUUOwBEpQ8zWpLIDWJrCugfr0aMDP36XwEk1lzdXVadr0oNtvD/s1600/menuback1.png[/url]); color: #03b4cc; } ul#main-nav li.home a:hover { background-image: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaZM1wtEcNroIQ7sqSpK0g7KGWuCcFlxiZ7gFChhfEW5WuAcZrXEvEEf3AGYYnrSgvEyKaSVMqGK6R7tM-MnVKSVG9ASQUUOwBEpQ8zWpLIDWJrCugfr0aMDP36XwEk1lzdXVadr0oNtvD/s1600/menuback1.png[/url]); color: #f7f7f7; } ul#main-nav li.current a {     background-position: top;     color: #ffffff; } ul#main-nav li a:hover {     background-position: bottom;     color: #c2c2c2;     background: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj08OGzH4oO5i-CC7D19K9aRCf1r_PZ6-fiscKhlpAGpirVCLj88Dr9jgUESQ5uCxqFBQwbJTSwjEXh2zmPPEQ-ECNBFY5TgCmhY3nqHRjaEt5Tv9bSWqEBHUUacuusjm_D-kJIylsA9M83/s1600/menuback5.png[/url]);     padding-left: 25px;     cursor: pointer; } ul#main-nav li.current a:hover {     background-position: top;     color: #ffffff; } ul#main-nav li.current {     z-index: 100; } ul#main-nav li.home {     z-index: 100; } ul#main-nav li.web-design {     z-index: 99; } ul#main-nav li.web-development {     z-index: 98; } ul#main-nav li.blogging {     z-index: 97; } ul#main-nav li.blogger-tips {     z-index: 96; } ul#main-nav li.widgets {     z-index: 95; } ul#main-nav { margin-left: 10px; } ul#main-nav li {     float: left;     position: relative;     margin-left: -20px;     display: inline; } .mbt_navigation1 {         position:absolute;         display:none; }  .mbt_navigation1 li {         clear:both; } ul#mbt_navigation1 li a { background: #242424; width: 196px; padding-left: 10px; color: #c2c2c2; opacity: 0.9; font-family: arial; font-size: 14px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; } ul#mbt_navigation1 li a:hover { background: #535353; color: #f7f7f7; margin-left: -22px; } #main-nav li ul {     background: #242424;     border-left: 2px solid #2b2b2b;     border-right: 2px solid #2b2b2b;     border-bottom: 2px solid #2b2b2b;     display: none;     height: auto;     filter: alpha(opacity=95);     opacity: 0.9;     position: absolute;     width: 177px;     z-index: 200;     -webkit-transition: all .2s ease-in-out;     -moz-transition: all .2s ease-in-out;     -ms-transition: all .2s ease-in-out;     -o-transition: all .2s ease-in-out;     transition: all .2s ease-in-out; /*top:1em; /*left:0;*/ } #main-nav li:hover ul {     display: block;     background-image: none; } #main-nav li li {     display: block;     float: none;     padding: 0px;     width: 245px; } .searchbutton1:hover{ opacity: 0.9; border: none; } .icon-right2 {   color: #4e4e4e;   font-size: 7px; } </style> <ul id='main-nav'> <li class='home'><a href='#'>Главная</a></li> <li class='web-design'><a>Название<span class='icon-right2'>&#9660;</span></a> <ul id='mbt_navigation1'> <li><a href='#'>название</a></li> <li><a href='#'>название</a></li> <li><a href='#'>название</a></li> <li><a href='#'>название</a></li> <li><a href='#'>название</a></li> <li><a href='#'>название</a></li> </ul></li> <li class='main-nav web-development'><a>Название<span class='icon-right2'>&#9660;</span></a> <ul id='mbt_navigation1'> <li><a href='#'>HTML</a></li> <li><a href='#'>CSS</a></li> <li><a href='#'>Название</a></li> </ul></li> <li class='main-nav web-development'><a>Название<span class='icon-right2'>&#9660;</span></a> <ul id='mbt_navigation1'> <li><a href='#'>HTML</a></li> <li><a href='#'>CSS</a></li> <li><a href='#'>Название</a></li> </ul></li> <li class='main-nav web-development'><a>Название<span class='icon-right2'>&#9660;</span></a> <ul id='mbt_navigation1'> <li><a href='#'>HTML</a></li> <li><a href='#'>CSS</a></li> <li><a href='#'>Название</a></li> </ul></li> <li class='blogging'><a href='#'>Название</a></li> <li class='widgets'><a href='адрес'>Виджеты</a></li> <li class='main-nav'><a>Заголовок <span class='icon-right2'>&#9660;</span></a> <ul id='mbt_navigation1'> <li><a href='#'>SEO</a></li> <li><a href='#'>HTML Code</a></li> <li><a href='#'>HTML Code</a></li> <li><a href='#'>Заголовок</a></li> <li><a href='#'>Generator</a></li> <li><a href='#'>Кнопки</a></li> </ul></li> </ul> Настройки: выделено зеленым цвет и размер шрифта вкладок; синим цвет вкладки главной страницы; бардовым цвет заголовков при наведении мыши; коричневым отступ от края слева ( этому значению уделите внимание), голубым цвет и размер иконки; сиреневый цвет удалить или добавить вкладку и ссылки в выпадающем меню; лиловым размер шрифта названий ссылок в выпадающей вкладке; Вместо решеток вставьте адреса ссылок; &#9660; код иконки, измените на свою при необходимости;