Как создать меню в Blogger

 Заходим в конструктор нашего блога ( https://draft.blogger.com ). Находим пункт "Дизайн" и заходим. Находим кнопку "Настроить" и кликаем по ней. Дальше нажимаем "Дополнительно" и "Добавить CSS". И вводим там вот эти фразы:

.tabs-outer, .tabs .widget ul {overflow: visible;}

.tabs .widget ul li {position: relative; z-index: 1000;}

.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;}

.tabs .widget ul li:hover a:hover;

.tabs .widget ul li:hover a:hover {color: rgba(transparent);}

#jsddm { margin: 0; padding: 15px; z-index:1000000000; position:relative; background: transparent; }

#jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial; background: transparent; }

#jsddm li a {

   font-weight: 700;

  color: white;

  text-decoration: none;

  padding: .8em 1em calc(.8em + 3px);

  border-radius: 3px;

  background: rgb(64,199,129);

  box-shadow: 0 -3px rgb(53,167,110) inset;

  transition: 0.2s;

  margin: 5px;

  font-size: 15px;

  font-family: Helvetica, Arial, Sans-Serif; 

}

#jsddm li a:hover { background: #C8C8C8; }

#jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; background: transparent; }

#jsddm li ul li { float: none; display: inline; }

#jsddm li ul li a { width: auto; background: #74F285; }

#jsddm li ul li a:hover { background: #A3CEE5; }

Дальше сохраняем и возвращаемся назад, дальше находим кнопку "Редактировать HTML".

В большом коде находим строчку </head>.

И перед ней вставляем скрипт:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

var timeout = 500;

var closetimer = 0;

var ddmenuitem = 0;

function jsddm_open()

{ jsddm_canceltimer();

jsddm_close();

ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()

{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()

{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()

{ if(closetimer)

{ window.clearTimeout(closetimer);

closetimer = null;}}

$(document).ready(function()

{ $('#jsddm > li').bind('mouseover', jsddm_open)

$('#jsddm > li').bind('mouseout', jsddm_timer)});

document.onclick = jsddm_close;

//]]>

</script>

Почти готово. Заходим в "Макет" и в раздел Cross-Column 2 добавляем гаджет:

Заглавие: Меню

Содержание:

<ul id="jsddm">

<li><a href="###">Главная</a>

<li><a href="###">Menu 1</a>

<ul>

<li><a href="###">Подменю 1-1</a></li>

<li><a href="###">Подменю 1-2</a></li>

<li><a href="###">Подменю 1-3</a></li>

</ul>

</li>

<li><a href="###">Menu 2</a>

<ul>

<li><a href="###">Подменю 2-1</a></li>

<li><a href="###">Подменю 2-2</a></li>

</ul>

</li>

<li><a href="###">Menu 3</a>

<ul>

<li><a href="###">Подменю 3-1</a></li>

<li><a href="###">Подменю 3-2</a></li>

<li><a href="###">Подменю 3-3</a></li>

<li><a href="###">Подменю 3-4</a></li>

</ul></li>

<li><a href="###">Menu 4</a></li>

<li><a href="###">Menu 5</a></li>

<li><a href="###">Школа Blogger(а)</a></li>

</li></ul>