Простое вертикальное меню

 

Простое вертикальное меню.

Здесь вообще все очень просто – идете в Шаблон – Добавить гаджет (слева или справа) и  вставить HTML/JavaScript. В него вставляете код :

<style type="text/css">

/* Edit by lagunof.blogspot.com*/

#ddblueblockmenu{

border: 1px solid #000000; /*Main Border Color */

border-bottom-width: 0;

width: 100%;

}

#ddblueblockmenu ul{

margin: 0;

padding: 0;

list-style-type: none;

font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}

#ddblueblockmenu a{

display: block;

padding: 3px 0;

padding-left: 9px;

width: 94%; /*94% minus all left/right paddings and margins*/

text-decoration: none;

color: #000000; /* Menu Font Color */

background-color: #ffffff; /*Menu background Color */

border-bottom: 1px solid #90bade; /*Bottom border color */

border-left: 7px solid #000000; /*Left border color */

list-style-type:none;

}

* html #ddblueblockmenu a{ /*IE only */

width: 94%; /*IE 5*/

width: 94%; /*94% minus all left/right paddings and margins*/

}

#ddblueblockmenu a:hover {

background-color: #2586d7; /*Menu background Color On Hover*/

border-left-color: #1c64d1; /*Left border color On Hover*/

}

#ddblueblockmenu div.menutitle{

color: #ffffff; /* Title Font Color */

border-bottom: 1px solid black;

padding: 1px 0;

padding-left: 5px;

background-color: #000000;  /*Menu Tite Background Color*/

font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}

/* Made By AllBlogTools.com */

</style>

<div id="ddblueblockmenu">

<div class="menutitle">МЕНЮ</div>

<ul>

<a href=" http://ВАША ССЫЛКА ">Главная</a>

<a href=" http://ВАША ССЫЛКА ">Статьи списком</a>

<a href=" http://ВАША ССЫЛКА ">Шаблоны блоггер</a>

<a href=" http://ВАША ССЫЛКА ">Блоггер с нуля</a>

<a href="http://ВАША ССЫЛКА">Продвижение сайтов</a>

<a href="http://ВАША ССЫЛКА">Редактировать</a>

</ul></div><font size="1">Переработанно<a

href=" http://ВАША ССЫЛКА "> Bloggfast </a

href="http:></font>

заменяте слова на ссылки и всё. Настроить его очень просто почти под любой дизайн. Добавить пункт просто. Нужно только лишь добавить его в список. Я специально в своем блоге стараюсь останавливаться на таких решениях, которые простые и тредуют минимальных навыков.
Это я подсмотрел на BloggFast 
Здесь вы можете посмотреть как сделать вертикальное выпадающее меню для блога
                                                                                                                                                           

Вертикальное выпадающее меню для блога

   Вертикальное выпадающее меню (слева или справа)

Здесь все просто.
Берете код :

<style type="text/css">  <!--

/* CSS Document */

ul#menu-v,

ul#menu-v li,

ul#menu-v ul {

  margin: 0;

  border: 0 none;

  padding: 0;

  width: 260px;

  list-style: none;

}

ul#menu-v:after {

  clear: both;

  display: block;

  font: 1px/0px serif;

  content: ".";

  height: 0;

  visibility: hidden;

}

ul#menu-v li {

  float: left;

  display: block !important;

  display: inline;

  position: relative;

  border:#ddcca2 1px solid;

}

ul#menu-v li ul li {

border:none;

border-bottom:#991500 2px solid;

}

/* Root Menu */

ul#menu-v a {

  padding: 0 6px;

  display: block;

  background: #ebe0c7;/цвет коробки/

  color: #991500;/цвет названия рубрик/

  font: bold 12px/28px Verdana, Arial;

  text-decoration: none;

  height: auto !important;

  height: 1%;

}

ul#menu-v a:hover,

ul#menu-v li:hover a,

ul#menu-v li.iehover a {

  background: #991500;

  color: #ebe0c7;

}

/* 2nd Menu */

ul#menu-v li:hover li a,

ul#menu-v li.iehover li a {

  background: #ebe0c7;

  color: #991500;

  border:#ddcca2 1px solid;

}

ul#menu-v li:hover li a:hover,

ul#menu-v li:hover li:hover a,

ul#menu-v li.iehover li a:hover,

ul#menu-v li.iehover li.iehover a {

  background: #991500;

  color: #ebe0c7;

  border:#ebe0c7 1px solid;

}

ul#menu-v ul,

ul#menu-v ul ul,

ul#menu-v ul ul ul {

  display: none;

  position: absolute;

  top: 0;

  left: 240px;

}

ul#menu-v li:hover ul ul,

ul#menu-v li:hover ul ul ul,

ul#menu-v li.iehover ul ul,

ul#menu-v li.iehover ul ul ul {

  display: none;

}

ul#menu-v li:hover ul,

ul#menu-v ul li:hover ul,

ul#menu-v ul ul li:hover ul,

ul#menu-v li.iehover ul,

ul#menu-v ul li.iehover ul,

ul#menu-v ul ul li.iehover ul {

  display: block;

}

-->  </style>

<ul id="menu-v">

    <li><a href="#">Вертикальное</a>

        <ul>

          <li><a href="#">Ссылка 1</a></li>

          <li><a href="#">Ссылка 2</a></li>

        </ul>

    </li>

    <li><a href="#">CSS</a>

        <ul>

          <li><a href="#">Ссылка 1</a></li>

          <li><a href="#">Ссылка 2</a></li>

          <li><a href="#">Ссылка 3</a></li>

          <li><a href="#">Ссылка 4</a></li>

          <li><a href="#">Ссылка 5</a></li>

        </ul>

    </li>

    <li><a href="#">Меню</a>

        <ul>

          <li><a href="#">Ссылка 1</a></li>

          <li><a href="#">Ссылка 2</a></li>

        </ul>

    </li>

</ul>

Вставляете его в гаджет (добавить HTML/JavaScript)

Значения  справа или слева будет выпадать меню (отмечено желтым) меняете по своему усмотрению. Так же подбираете цвет и прочее согласно оформлению вашего блога.Мне нравится это меню, потому что достаточно легко поставить на свой блог и еще проще настроить под свой дизайн.
Это фишку я подсмотрел у "Блоггера-новичка"
Посмотрите как можно сделать

простое вертикальное меню

Или выпадающее меню по типу "Аккордеон"