Как создать выпадающее меню

Для создания выпадающего меню можно найти скрипты в интернете. Для добавления меню на боковую панель нужно создать меню в разделе "Дизайн" - добавить гаджет и создаем меню. Дальше перетягиваем меню в нужное для вас положение.

Для того,что бы сделать меню с эффектами можно в разтеле "Тема" найти "дополнительное"-добавить CSS

Пример

меню:

<ul id="nav">

<li>

<a href="#" title="Вернуться на главную страницу">Главная</a>

</li>

<li>

<a href="#" title="Информация о компании">О нас</a>

<ul>

<li><a href="#">Продукты</a></li>

<li><a href="#">Команда</a></li>

</ul>

</li>

<li>

<a href="#" title="Что мы можем для вас сделать">Услуги</a>

<ul>

<li><a href="#">Услуга один</a></li>

<li><a href="#">Услуга два</a></li>

<li><a href="#">Услуга три</a></li>

<li><a href="#">Услуга четыре</a></li>

</ul>

</li>

<li>

<a href="#" title="Наша продуктовая линейка">Продукты</a>

<ul>

<li><a href="#">Маленький продукт (первый)</a></li>

<li><a href="#">Маленький продукт (второй)</a></li>

<li><a href="#">Маленький продукт (третий)</a></li>

<li><a href="#">Маленький продукт (четвертый)</a></li>

<li><a href="#">Большой продукт (пятый)</a></li>

<li><a href="#">Большой продукт (шестой)</a></li>

<li><a href="#">Большой продукт (седьмой)</a></li>

<li><a href="#">Большой продукт (восьмой)</a></li>

<li><a href="#">Невообразимый продукт (девятый)</a></li>

<li><a href="#">Невообразимый продукт (десятый)</a></li>

<li><a href="#">Невообразимый продукт (одиннадцатый)</a></li>

</ul>

</li>

<li>

<a href="#" title="Как с нами связаться">Контакт</a>

<ul>

<li><a href="#">Часы работы</a></li>

<li><a href="#">Местоположение</a></li>

</ul>

</li>

</ul>

и в дополнительно:

#nav{

float:left;

width:100%;

list-style:none;

font-weight:bold;

margin-bottom:10px;

}

#nav li{

float:left;

margin-right:10px;

position:relative;

display:block;

}

#nav li a{

display:block;

padding:5px;

color:#fff;

background:#333;

text-decoration:none;

text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */

-moz-border-radius:2px;

-webkit-border-radius:2px;

border-radius:2px;

}

#nav li a:hover{

color:#fff;

background:#6b0c36;

background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */

text-decoration:underline;

}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/

#nav ul{

list-style:none;

position:absolute;

left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */

opacity:0; /* Устанавливаем начальное состояние прозрачности */

-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */

}

#nav ul li{

padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */

float:none;

background:url(dot.gif);

}

#nav ul a{

white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */

display:block;

}

#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */

left:0; /* Приносим его обратно на экран, когда нужно */

opacity:1; /* Делаем непрозрачным */

}

#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */

background:#6b0c36;

background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */

text-decoration:underline;

}

#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */

text-decoration:none;

-webkit-transition:-webkit-transform 0.075s linear;

}

#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */

background:#333;

background:rgba(51,51,51,0.75); /* Будет полупрозрачным */

text-decoration:underline;

-moz-transform:scale(1.05);

-webkit-transform:scale(1.05);

}

#nav ul{

list-style:none;

position:absolute;

left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод, лучше чем display:none;) */

opacity:0; /* Устанавливаем начальное состояние прозрачности */

-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */

}

#nav ul li{

padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */

float:none;

background:url(dot.gif);

}

#nav ul a{

white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */

display:block;

}

#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */

left:0; /* Приносим его обратно на экран, когда нужно */

opacity:1; /* Делаем непрозрачным */

}

#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */

background:#6b0c36;

background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */

text-decoration:underline;

}

#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */

text-decoration:none;

-webkit-transition:-webkit-transform 0.075s linear;

}

#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */

background:#333;

background:rgba(51,51,51,0.75); /* Будет полупрозрачным */

text-decoration:underline;

-moz-transform:scale(1.05);

-webkit-transform:scale(1.05);

}