Еще вариант горизонтального меню

 Устанавливаете дизайн добавить гаджет в нужное место макета блога.

Скопируте код ниже

<style>#mbtnavbar {    background: #3B5998;  width: 100%;
    color: #FFF;        margin: 10px 0;        padding: 0;        position: relative;        border-top:0px solid #960100;        height:35px;}#mbtnav {    margin: 0;    padding: 0;}#mbtnav ul {    float: left;    list-style: none;    margin: 0;    padding: 0;}#mbtnav li {    list-style: none;    margin: 0;    padding: 0;      }#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {    color: #FFF;    display: block;   font:bold 12px Helvetica, sans-serif;   margin: 0;    padding: 9px 12px 11px 12px;        text-decoration: none;        border-right:0px solid #627AAD;}#mbtnav li a:hover, #mbtnav li a:active {    background: #627AAD;    color: #FFF;    display: block;    text-decoration: none;        margin: 0;    padding: 9px 12px 11px 12px;    
}#mbtnav li {    float: left;    padding: 0;}#mbtnav li ul {    z-index: 9999;    position: absolute;    left: -999em;    height: auto;    width: 160px;    margin: 0;    padding: 0;}#mbtnav li ul a {    width: 140px;}#mbtnav li ul ul {    margin: -25px 0 0 161px;}#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {    left: -999em;}#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {    left: auto;}#mbtnav li:hover, #mbtnav li.sfhover {    position: static;}#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {    background: #EDEFF4;    width: 120px;    color: #3B5998;    display: block;    font:normal 12px Helvetica, sans-serif;    margin: 1px 0 0 0;    padding: 9px 12px 10px 12px;        text-decoration: none;z-index:9999;border:1px solid #ddd;-moz-border-radius:4px;-webkit-border-radius:4px;
}#mbtnav li li a:hover, #mbtnav li li a:active {    background: #627AAD;    color: #FFF;    display: block;    }#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {    background: #EDEFF4;    width: 120px;    color: #3B5998;    display: block;    font:normal 12px Helvetica, sans-serif;    padding: 9px 12px 10px 12px;        text-decoration: none;z-index:9999;border:1px solid #ddd;    margin: 1px 0 0  -14px;
   }#mbtnav li li li a:hover, #mbtnav li li li a:active {    background: #627AAD;    color: #FFF;    display: block;}</style><div id='mbtnavbar'>          <ul id='mbtnav'>            <li>              <a href='http://experiment-u.blogspot.com'>Главная страница</a>            </li>            <li>              <a href='#'>Контакты</a>           </li> <li>              <a href='#'>Об авторе</a>           </li>            <li>              <a href='#'>Партнерские программы</a>            </li>      <li>               <a href='#'>Карта▼</a>                <ul>                    <li><a href='#'>Виджеты</a></li>                    <li><a href='#'>Дизайн</a></li>                    <li><a href='#'>Рамки</a>                   <ul>                    <li><a href='#'>Оптимизация</a></li>                    <li><a href='#'>SEO</a></li>                    <li><a href='#'>Индексация</a></li>                  </ul></li>                  </ul>            </li>          </ul>        </div>

Все выделенное жирным шрифтом можно настроить.
https://demo-q.blogspot.com/2015/09/blog-post_21.html