Выпадающее меню

Как сделать выпадающее меню-навигация?

Тема-Настроить-CSS

.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);}
#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Дизайн-Поперечный столбец-добавить java Script-Заголовок root-в тело вставляем:

<ul id="jsddm">
<li><a href="http://pene4ek.blogspot.com/">Главная</a>
<li><a href="###">Рецепты</a>
<ul>
<li><a href="http://pene4ek.blogspot.com/p/blog-page.html">Простые</a></li>
<li><a href="###">Десерты</a></li>
<li><a href="http://pene4ek.blogspot.com/p/blog-page_3.html">Диетические</a></li>
</ul>
</li>
<li><a href="###">Масляница</a>
<ul>
<li><a href="http://pene4ek.blogspot.com/p/blog-page_19.html">О празднике</a></li>
<li><a href=" http://www.segodnya.ua/life/diets/pyat-receptov-dieticheskih-blinov-s-polzoy-dlya-figury-846763.html
">Рецепты блинов</a></li>
</ul>
</li>
<li><a href="###">Технологии</a>
<ul>
<li><a href="http://pene4ek.blogspot.com/p/wordpress.html
">Как работать с ВордПресс?</a></li>
<li><a href="http://pene4ek.blogspot.com/p/blog-page_5.html">Моя работа с ВордПресс</a></li>
<li><a href="###">Меню-навигация</a></li>
<li><a href="###">Подменю 3-4</a></li>
</ul>
</li>
<li><a href="http://pene4ek.blogspot.com/p/blog-page_1.html">Тесты</a></li>
<li><a href="###">Menu 5</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1018110766578143649#allpages">Школа Blogger(а)</a></li>
</li></ul>

Примечания:

Вместо  ### вставляем ссылку на нужную страницу.