Выпадающее горизонтальное меню под шапкой блога

Выпадающее горизонтальное меню под шапкой блога.

Мне понравилось такое решение. Насколько труднее, чем просто вставить код, но и результат достойный.

Идем в Шаблон – изменить HTML – и перед ]]></b:skin>
вставляем код :

/*---- menu----*/
#osn {
    background: #0000cc; /*----- Цвет фона основного меню----*/
    width: 1350px; /*----- Ширина основного меню----*/
    color: #0000cc;
        margin: 0px;
        padding: 0;
position: relative; left: +17%;
        border-top:0px solid #0000cc; /*----- Верхняя граница меню: ширина стиль цвет----*/
        height:38px; /*----- Высота меню----*/
}

#menu {
    margin: 0;
    padding: 0;
}
#menu ul {
float: left; /*----- Выравнивание меню----*/
    list-style: none; /*----- Отсутствие маркеров списка основного меню----*/
    margin: 0;
    padding: 0;
}
#menu li {
    list-style: none; /*----- Отсутствие маркеров списка подменю----*/
    margin: 0;
    padding: 0;
        border-left:0px solid #0000cc; /*----- Граница левая элемента главного меню стиль и цвет----*/
        border-right:0px solid #0000cc; /*----- Граница правая элемента меню----*/
        height:32px; /*----- Высота меню отдельного элемента----*/
}
#menu li a, #menu li a:link, #menu li a:visited {
    color: #FFF;  /*----- Цвет ссылки элемента основного меню ----*/
    display: block;
   font: normal 14px Helvenica, sans-serif;    margin: 0; /*----- Шрифт ссылок основного меню----*/
   padding: 9px 25px 10px 25px; /*----- Отступы ссылки от границ блока, если вы меняете отступы, то нужно изменить ширину меню и высоту основного меню и отдельного элемента----*/
        text-decoration: none; /*----- Отсутствие подчеркивания ссылки----*/
     
}
#menu li a:hover, #menu li a:active,  #menu li a:visited {
    background: #9999ff; /*----- Цвет элемента основного меню при наведении----*/
    color: #fff; /*----- Цвет ссылки элемента основного меню при наведении курсора----*/
    display: block;
    text-decoration: none; /*----- Отсутствие подчеркивания ссылки----*/
        margin: 0;
    padding: 9px 25px 10px 25px; /*----- Отступы ссылок при наведении и активных, должны быть равны отступам неактивных ссылок, если не задумано смещение при наведении----*/
}
#menu li {
    float: left;
    padding: 0;
}
#menu li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#menu li ul a {
    width: 140px;
}
#menu li ul ul {
    margin: -25px 0 0 160px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
    left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
    left: auto;
}
#menu li:hover, #menu li.sfhover {
    position: static;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
    background: #0000cc; /*----- Цвет фона выпадающего меню----*/
    width: 160px;
    border-bottom:1px  #0000cc;
    color: #fff; /*----- Цвет неактивных ссылок выпадающего меню----*/
   display: block;
    font:normal 14px Helvetica, sans-serif;
    margin: 0;
    padding: 7px 12px 10px 12px; /*----- Отступы ссылок выпадающего меню----*/
        text-decoration: none;
    z-index:9999;
   
}
#menu li li a:hover, #menu li li a:active {
    background: #9999ff; /*----- Цвет фона выпадающего меню при наведении на пункт----*/
    color: #fff; /*----- Цвет наведенной и активной ссылки пункта выпадающего меню----*/
    display: block;     margin: 0;
    padding: 7px 12px 10px 12px; /*----- Отступы наведенных и активных ссылоквыпадающего

меню ----*/
        text-decoration: none;
     border-bottom:1px  #0000cc;
}
.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; background: rgba(0,61,118,.95);}
.tabs .widget ul li:hover a:hover {color: rgba(66,170,255,1);}
/*-----end menu----*/

В шаблоне отметил width: 1350px это значение определяет ширину. Вы можете ее измениь в зависимости от вашего шаблона.
Цвета меню : #0000cc-основной фон пунктов,  #9999ff-  фон при наведении мышки;

 #0000cc-фон выпадающего меню;  #9999ff-фон выбранного подпункта.  При желании подобрать другую гамму.

   Сохраняем шаблон и приступим к собственно меню.

Идем в Дизайн – вставить код HTML/JavaScript и туда вставляем код:

<div id='osn'>

  <ul id='menu'>

    <li><a href='адрес вашего блога'>Главная</a></li>

    <li><a href='#'>Обо мне</a></li>

      

        <li> <a href="адрес вашего блога/">Пункт1</a>

              <ul>

                   <li><a href='#'>Подпункт 1.1</a></li>

                   <li><a href='#'>Подпункт 1.2</a></li>

                   <li><a href='#'>Подпункт 1.3</a></li>

                   <li><a href='#'>Подпункт1.4</a></li>

             </ul>

         </li>

 

   <li><a href="#">Ярлык</a></li>

   <li> <a href="#">Ярлык</a></li> 

    

          <li><a href="адрес вашего блога">Пункт2</a>

                         <li><a href='#'>Подпункт 2.1</a></li>

                         <li><a href='#'>Подпункт 2.2</a></li>

                   <ul>                               <li><a href='#'>Подпункт 2.3</a></li>

     

                  </ul>

          </li>

     <li><a href='#'>Карта блога</a></li>   

   </ul>

 </div>

  Расположение меню по центру блога

   Находим в коде CSS  строку: position: relative; left: +17%;

Если убрать  left: +17%;   тогда меню будет прижато к левому краю. Для расположения по центру  % надо подбирать опытным путем или вычислить.
Очень интересный вариант решения это простое горизонтальное выпадающее меню.
Спасибо за материал Нине Зоркиной.