Горизонтальное, плавающее (фиксированное), выпадающее меню для blogspot

Привет читатели блога. Я не надолго вылетела из блоговедения)), подвернулась возможность опробовать свои навыки в ковыряния в шаблоне на blogspot платформе. Результаты оцениваю на 4 бала из 5))). Во первых очень долго, но я сама себя оправдываю, что я все же жена и мама, во вторых шаблон изначально хозяйка устанавливала сама и он нестандартный, а потому пришлось с ним знакомиться с нуля и это то же отняло время.

Ну вот похвалилась, что я стала "авторитетом" и меня просят повозиться с блогом.

Но сегодня не об этом. Не давно на блоге "конкурента" да простит меня Justus (он скорей мой вдохновитель на новые посты, потому  что я частенько подглядываю в его блог, и читаю вопросы его комментаторов. Там частенько беру идеи для постов). Так вот один из его читателей спрашивал про "горизонтальное, плавающее (фиксированное), выпадающее меню". (Это значит что при прокрутке вашего блога, данное меню будет путешествовать вниз или вверх, как ветки елки с игрушками, на многих блогах такое есть). На русской платформе blogspot народные умельцы не придумали такое меню. И тут я вспоминаю, что видела нечто подобное у блоггеров за бугром.

 Оказывается это в последнее время считаться шиком. Кто бы мог подумать...  Злорадно хихикая, я пошла искать, что бы поделиться с вами этим простым в установке, но сложным в освоении скриптом. Но когда чего-то хочется, невозможное становится возможным.

Как это работает смотреть тут

Для тех кто рискнет его применить сам скрипт:

<style>#sbfixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}#sbfixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}* html, * html body{overflow-y:hidden;height:100%;}* html #sbfixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }* html #sbfixedinner{margin-right:17px;}* html #sbfixed {position:absolute;}#sbtop-wrapper{background:#20263c;width:100%;float:left;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid rgb(72, 161, 250);}#sbtopbar{width:980px;height:40px;margin:0 auto}#sbtop{width:100%}#sbtop,#sbtop ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}#sbtop a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}#sbtop a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDicviqXgd9wZNstdHO8B3A516wCqLEj6Qcbez15jZUfV4eDaZXkXHLBUFb0ZA0tUAQ24IuJIw2QwtaoCSFSrMSxkBceP4L_nmXXSBDOwsPTOLUUEqAN4Ti9mVdEcIDqnavvl59sakEJc/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}#sbtop li{float:left;position:static;width:auto}#sbtop li ul,#sbtop ul li{width:170px}#sbtop ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}#sbtop li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}#sbtop li:hover a,#sbtop a:active,#sbtop a:focus,#sbtop li.hvr a{background-color:#222;color:#fff}#sbtop li:hover ul,#sbtop li.hvr ul{display:block}#sbtop li:hover ul a,#sbtop li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}#sbtop li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}#sbtop ul a:hover{background-color:rgb(72, 161, 250)!important;color:#fff!important;text-decoration:none}#sbtop a span,#sbtop a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}#sbtop li:hover a span,#sbtop li:hover a.arrow span{color:#f1c822}</style><div id="sbfixed"><div id="sbfixedinner"><div id="sbtop-wrapper"><div id="sbtopbar"><ul id="sbtop"><li><a href="3"><span>Привет</span>на главную</a></li><li><a href="/"><span>О себе</span>нажать</a></li>><li><a href="3"><span>О Блоге</span>нажать</a></li><li><a href="3"><span>Сладкое</span>торты</a><ul><li><a href="3n">наполеон</a></li><li></li><li><a href="3">медовик</a></li><li></li><li><a href="3n">яблочный</a></li><li></li><li><a href="3">черничный</a></li></ul></li><li><a href="3"><span>Первые</span>блюда</a><ul><li><a href="3r">Борщ</a></li><li></li><li><a href="3">Супы</a></li><li></li><li><a href="3">Щи</a></li><li></li><li><a href="3">Холодец</a></li><li></li><li><a href="3">Жаркое</a></li></ul></li><li><a href="3"><span>Закуски</span>холодные</a><ul><li></li><li><a href="3" rel="nofollow">Бутерброды</a></li><li></li><li><a href="3" rel="nofollow">из теста</a></li><li></li><li><a href="3" rel="nofollow">с икрой</a></li><li></li><li><a href="3" rel="nofollow">паштетом</a></li><li></li><li><a href="3" rel="nofollow">с маслом</a></li></ul></li></ul></div><div style="clear:both;"></div></div></div></div>

Скрипт вставляете в html/JavaSkript

Но прежде чем вставить, этот скрипт вам нужно его довести до логического ума, в смысле что бы он работал корректно на вашем блоге.
Для этого:
Закуски -  и все слова подчеркнутые как это слово ЗАМЕНИТЬ НА СВОЕ.

И самое кропотливое: 

a href="3" цифру 3 надо удалить и вставить адрес. Например: a href="http://demo-studing-blog.blogspot.com/"- то есть к каждому слову нужно присвоить адрес, куда попадет ваш читатель при нажатии на него.

Если пост оказался полезным не забывайте поделиться и нажать на кнопки социальных сетей.

Скрипт взят отсюда http://www.trueblogtips.com/stylish-floating-header-menu-by/