место сайта, например, подвал, боковая панель. 
Добавляем на сайт Дизайн/Добавить гаджет/HTML/JavaScript.
Коды на css, а значит сайт не загружают.
Проверить работоспособность кода можно в визуальном редакторе. Добавляем код в первое окошко и нажимаем кнопку Показать результат.
Градиентное меню
<div class="wrapper">
<nav class="vertical">
<ul>
<li>
<label for="блог">Блог</label>
<input type="radio" name="verticalMenu" id="блог" />
<div>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">О блоге</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</li>
<li>
<label for="инструменты">Инструменты</label>
<input type="radio" name="verticalMenu" id="инструменты" />
<div>
<ul>
<li><a href="#">Редактор</a></li>
<li><a href="#">Генератор</a></li>
<li><a href="#">Цвет</a></li>
</ul>
</div>
</li>
<li>
<label for="программы">Программы</label>
<input type="radio" name="verticalMenu" id="программы" />
<div>
<ul>
<li><a href="#">Рукоделие</a></li>
<li><a href="#">Кулинария</a></li>
<li><a href="#">Искусство</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<style>
* {
margin: 0;
padding: 0;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.wrapper {
margin: 20px auto;
width: 300px;
}
p {
font-family: georgia;
font-size: 1rem;
line-height: 25px;
margin: 24px 0;
text-align: center;
}
nav.vertical {
border-radius: 4px;
box-shadow: 0 0 10px rgba(0,0,0,.15);
overflow: hidden;
text-align: center;
}
nav.vertical > ul {
list-style-type: none;
}
nav.vertical > ul > li {
display: block;
}
nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
background-color: rgb(15,71,17);
background-image: -webkit-linear-gradient(135deg, rgb(41,97,52), rgb(14,209,76));
background-image: -moz-linear-gradient(135deg, rgb(41,97,52), rgb(14,209,76));
background-image: -o-linear-gradient(135deg, rgb(41,97,52), rgb(14,209,76));
background-image: linear-gradient(135deg, rgb(41,97,52), rgb(14,209,76));
border-bottom: 1px solid rgba(255,255,255,.1);
box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
color: rgb(255,255,255);
display: block;
font-size: .85rem;
font-weight: 500;
height: 50px;
letter-spacing: .5rem;
line-height: 50px;
text-shadow: 0 1px 1px rgba(0,0,0,.1);
text-transform: uppercase;
transition: all .1s ease;
}
nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
background-color: rgb(83, 26, 80);
background-image: -webkit-linear-gradient(150deg, rgb(96,54,187), rgb(114, 51, 98));
background-image: -moz-linear-gradient(150deg, rgb(96,54,187), rgb(114, 51, 98));
background-image: -o-linear-gradient(150deg, rgb(96,54,187), rgb(114, 51, 98));
background-image: linear-gradient(150deg, rgb(96,54,187), rgb(114, 51, 98));
cursor: pointer;
}
nav.vertical > ul > li > label + input {
display: none;
visability: hidden;
}
nav.vertical > ul > li > div {
background-color: rgb(255,255,255);
max-height: 0;
overflow: hidden;
transition: all .5s linear;
}
nav.vertical > ul > li > label + input:checked + div {
max-height: 500px;
}
nav.vertical > ul > li > div > ul {
list-style-type: none;
}
nav.vertical > ul > li > div > ul > li > a {
background-color: rgb(255,255,255);
border-bottom: 1px solid rgba(0,0,0,.05);
color: #333331;
display: block;
font-size: 1.1rem;
padding: 10px 0;
text-decoration: none;
transition: all 0.15s linear;
}
nav.vertical > ul > li > div > ul > li:hover > a {
background-color: plum;
color: rgb(255,255,255);
padding: 10px 0 10px 50px;
}
</style>
Красным выделила названия пунктов и подпунктов в меню. Синим - место, куда добавлять адреса страниц.
Оранжевым - градиентный цвет пунктов меню.
Зелёным - градиентный цвет пунктов меню при наведении курсора.
Розовым - цвет подпунктов, при наведении курсора.
Так же можно поменять размер шрифта, самого виджета.
Если нужно сделать больше пунктов, то перед тегом </nav> (отметила в коде фиолетовым) добавляем:
<ul>
<li>
<label for="дополнительная">Дополнительная</label>
<input type="radio" name="verticalMenu" id="дополнительная" />
<div>
<ul>
<li><a href="#">новая</a></li>
<li><a href="#">новая</a></li>
<li><a href="#">новая</a></li>
<li><a href="#">новая</a></li>
</ul>
</div>
</li>
Автор кода lawnch
Меню чёрно-красное
<div class="main-menu">
<input class="toggle-box" id="block-1" type="checkbox" >
<label for="block-1">Сайт</label>
<div>
<ul class="vertical-menu">
<li><a href="#">Главная</a>
<li><a href="#">Карта сайта</a>
<li><a href="#">О сайте</a>
<li><a href="#">Автор</a>
<li><a href="#">Контакты</a>
</ul>
</div>
<ul class="first-menu">
<li><a href="#">Помощь</a>
<li><a href="#">Ответы на вопросы</a>
</ul>
<input class="toggle-box" id="block-2" type="checkbox" >
<label for="block-2">Инструменты</label>
<div>
<ul class="vertical-menu">
<li><a href="#">Редактор</a>
<li><a href="#">Генератор</a>
<li><a href="#">Таблица</a>
</ul>
</div>
<input class="toggle-box" id="block-3" type="checkbox" >
<label for="block-3">Информация</label>
<div>
<ul class="vertical-menu">
<li><a href="#">Политика конфиденциальности</a>
<li><a href="#">Правообладателям</a>
</ul>
</div>
</div>
<style>
.main-menu{
width: 250px;
padding: 0;
margin: 0 auto;
}
.toggle-box {
display: none;
}
.toggle-box + label {
background: #606060;
background: -moz-linear-gradient(top, #606060 0%, #FF0000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606060), color-stop(100%,#FF0000));
background: -webkit-linear-gradient(top, #606060 0%,#FF0000 100%);
background: -o-linear-gradient(top, #606060 0%,#FF0000 100%);
background: -ms-linear-gradient(top, #606060 0%,#FF0000 100%);
background: linear-gradient(top, #606060 0%,#505050 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#FF0000',GradientType=0 );
color: #FFF;
cursor: pointer;
display: block;
font: normal 14px "Open Sans", Helvetica, Arial, sans-serif;
line-height: 21px;
padding: 8px 22px;
margin-bottom: 0px;
}
.toggle-box + label:hover{
background: #FF0000;
color: #000;
}
.toggle-box + label + div {
display: none;
}
.toggle-box:checked + label + div {
display: block;
}
.toggle-box + label:before {
background: #404247;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
color: #FF0000;
content: "\1433";
display: block;
float: right;
font-size: 15px;
font-weight: bold;
height: 27px;
line-height: 27px;
margin: -3px 5px 0px;
text-align: center;
width: 27px;
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.toggle-box:checked + label:before {
content: "\142f";
}
.first-menu {
padding: 0;
margin: 0;
}
.first-menu li {
position: relative;
list-style: none;
outline: none;
background: #353535;
padding: 0;
margin: 0px;
}
.first-menu a {
background: #606060;
background: -moz-linear-gradient(top, #606060 0%, #FF0000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606060), color-stop(100%,#FF0000));
background: -webkit-linear-gradient(top, #606060 0%,#FF0000 100%);
background: -o-linear-gradient(top, #606060 0%,#FF0000 100%);
background: -ms-linear-gradient(top, #606060 0%,#FF0000 100%);
background: linear-gradient(top, #606060 0%,#505050 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#FF0000',GradientType=0 );
display: block;
text-decoration: none;
font: normal 14px "Open Sans", Helvetica, Arial, sans-serif;
color: #FFF;
padding: 8px 22px;
margin: 0;
}
.first-menu a:hover {
background: #FF0000;
color: #000;
}
.vertical-menu {
padding: 0;
margin: 0;
}
.vertical-menu li {
position: relative;
list-style: none;
outline: none;
background: #353535;
background: -moz-linear-gradient(top, #353535 0%, #252525 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(100%,#252525));
background: -webkit-linear-gradient(top, #353535 0%,#252525 100%);
background: -o-linear-gradient(top, #353535 0%,#252525 100%);
background: -ms-linear-gradient(top, #353535 0%,#252525 100%);
background: linear-gradient(to bottom, #353535 0%,#252525 100%);
padding: 0;
margin: 0px;
}
.vertical-menu a {
display: block;
text-decoration: none;
text-align: left;
font: normal 14px "Open Sans", Helvetica, Arial, sans-serif;
color: #FFF;
box-shadow: none;
padding: 7px;
margin: 0;
}
.vertical-menu a:hover {
color: #FF0000;
text-decoration: underline;
}
</style>
Красным отметила названия пунктов и подпунктов.Синим значок # - урл страниц пунктов и подпунктов.
Оранжевым - размер виджета.
Голубым - градиентные цвета подпунктов.
Зелёным - цвет текста подпунктов, при наведении курсора.
Розовым - цвет пунктов без подпунктов, при наведении курсора, салатовый - цвет пунктов с подпунктами, при наведении курсора - по желанию их можно сделать разными цветами,
а можно одинаковыми.
Фиолетовым- градиентные цвета пунктов без подпунктов, коричневым - градиентные цвета пунктов с подпунктами - по желанию их можно сделать разными цветами, а можно одинаковыми.
Жёлтый - цвет значка＜.
Серый - цвет круга со значком.
Чтобы добавить пункт без подпунктов, добавляем после </ul> (выделила в коде жёлтым)
строку :
<ul class="first-menu">
<li><a href="#">Новый пункт</a>
</ul>
Чтобы добавить пункт с подпунктами, добавляем после</ul>отрезок кода и меняем дважды порядковый номер в значении block-4,в зависимости от того, сколько у вас пунктов с подпунктами (в коде их 3,
значит, если добавляем новый, пишем 4 и т.д.)
<input class="toggle-box" id="block-4" type="checkbox" >
<label for="block-4">Новый пункт</label>
<div>
<ul class="vertical-menu">
<li><a href="#">Новый подпункт</a></ul>
Подпункты добавляем так:
после строки в коде <ul class="vertical-menu"> добавляем строку
<li><a href="#">Новый подпункт</a>
Автор кода Andrew.
Комментарии со спамом удаляются.