Выдвижное вертикальное меню DR-3 для uCoz

<style>  
/*для элемента с идентификаторов mymenu*/  
#mymenu {  
  width: 150px; /*ширина основного блока*/  
  margin: 0 auto; /*отступ то каждого края, так мы выровняли наше меню по центру*/  
}  
/*для элемента с классом mydiv, у которого в потомках есть идентификаторов mymenu*/  
#mymenu .mydiv {  
  width: 150px;/*ширина всего меню*/  
  transition: height ease-in-out 500ms; /*Изменяем высоту и задаем время задержки*/  
  -o-transition: height ease-in-out 500ms;  
  -moz-transition: height ease-in-out 500ms;  
  -webkit-transition: height ease-in-out 500ms;  
  border-radius: 15px;/*округления уголков рамки*/  
  -moz-border-radius: 15px;  
  -webkit-border-radius: 15px;  
}  
/*для элемента h3, у которого в потомках есть класс mydiv*/  
.mydiv h3{  
  cursor:pointer;  
  margin: 0 0 0 0;/*величина отступа от каждого края*/  
  text-align: center;  
  color:white;  
  border-radius: 15px;/*округления уголков заголовка*/  
  -moz-border-radius: 15px;  
  -webkit-border-radius: 15px;  
  background: #4EAEC1; /*цвет фона для параграфа*/  
/* FF3.6+ */  
  background: -moz-linear-gradient(top, #21cbed 0%, #055261 44%, #086a7d 100%);  
/* Chrome10+,Safari5.1+ */  
  background: -webkit-linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%);  
/* Opera 11.10+ */  
  background: -o-linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%);  
/*IE10+ */  
  background: -ms-linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%);  
/* W3C */  
  background: linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%);  
  filter: progid:DXImageTransform.Microsoft.gradient  
  ( startColorstr='#21cbed', endColorstr='#086a7d',GradientType=0 );  
}  
/*для элемента p у которого в потомках есть идентификаторов mymenu*/  
#mymenu p {  
  text-align: center;/*выравнивание по центру*/  
  margin: 0 0 0 0;/*величина отступа от каждого края*/  
  height: 0px;/*выставляем высоту для параграфа, чтобы по умолчанию он был скрыт*/  
  overflow: hidden;/*скрываем переполнение контента*/  
  transition: height ease-in-out 500ms; /*Изменяем высоту и задаем время задержки*/  
  -o-transition: height ease-in-out 500ms;  
  -moz-transition: height ease-in-out 500ms;  
  -webkit-transition: height ease-in-out 500ms;  
  border-radius: 15px;/*округления уголков параграфа*/  
  -moz-border-radius: 15px;  
  -webkit-border-radius: 15px;  
  background: #21cbed; /*цвет фона для параграфа*/  
/* FF3.6+ */  
  background: -moz-linear-gradient(top, #4EAEC1 0%, #188499 44%, #065868 100%);  
/* Chrome10+,Safari5.1+ */  
  background: -webkit-linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%);  
/* Opera 11.10+ */  
  background: -o-linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%);  
/* IE10+ */  
  background: -ms-linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%);  
/* W3C */  
  background: linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%);  
  filter: progid:DXImageTransform.Microsoft.gradient  
  ( startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 );  
   
}  
/*для элемента p с псевдоклассов :hover(срабатывает при наведение)  
у которого в потомках есть идентификаторов mymenu*/  
#mymenu p:hover {  
  background: #4ee1fe;/*цвет фона для парагрофа при наведение*/  
/* FF3.6+ */  
  background: -moz-linear-gradient(top, #4ee1fe 0%, #11b4d4 44%, #06a2c1 100%);  
/* Chrome10+,Safari5.1+ */  
  background: -webkit-linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%);  
/* Opera 11.10+ */  
  background: -o-linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%);  
/* IE10+ */  
  background: -ms-linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%);  
/* W3C */  
  background: linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%);  
  cursor:pointer;/*изменяем курсор*/  
}  
/*для элемента p который является дочерним элементом элемента div с псевдоклассом :hover  
(будет срабатывать при наведении) у которого в потомках есть идентификаторов mymenu*/  
#mymenu div:hover > p {  
  height: 25px;/*при наведение на блок с заголовком,  
  высота параграфа становится 25 пикселей,  
  это как раз и есть эффект появления подменю*/  
}  

/*далее идет примочка для Internet Explorer, другие браузеры ее не видят,  
так называемый хак для IE*/  
* html #mymenu .mydiv {  
  filter: progid:DXImageTransform.Microsoft.gradient  
  (startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 );  
  height: 20px;/*начальная высота блока*/  
  overflow: hidden; /*скрываем переполнение контента*/  
  forIE: expression(/*секция expression - вставляем javascript код,  
  для выставления нового класса*/  
  onmouseover = function() {this.className += ' hover'},  
  onmouseout = function() {this.className = this.className.replace('hover', '')}  
  );  
}  
/*для только что созданного нового класса .hover*/  
* html #mymenu .mydiv.hover {  
  height: auto;/*выставляем высоту для нашего блока с параграфами в авто  
  для того чтобы было динамическое меню, т.е. при добавлении новых пунктов меню  
  блок сам будет подгонять свой размер по данным внутри себя*/  
}  
/*для элемента a(ссылки) у которого в потомках есть элемент p,  
в свою очередь, у которого в потомках есть идентификаторов mymenu,  
поставим цвет белый, т.е. цвет ссылки*/  
#mymenu p a {  
  color:white;  
}  
</style>  
   
<div id="mymenu">  
  <div class="mydiv">  
  <h3 >Меню 1</h3>  
  <p><a href = "#">Подменю1</a></p>  
  <p><a href = "#">Подменю2</a></p>  
  </div>  
  <div class="mydiv">  
  <h3>Меню 2</h3>  
  <p><a href = "#">Подменю1</a></p>  
  <p><a href = "#">Подменю2</a></p>  
  <p><a href = "#">Подменю3</a></p>  
  </div>  
  <div class="mydiv">  
  <h3>Меню 3</h3>  
  <p><a href = "#">Подменю1</a></p>  
  <p><a href = "#">Подменю2</a></p>  
  <p><a href = "#">Подменю3</a></p>  
  <p><a href = "#">Подменю4</a></p>  
  </div>  
  <div class="mydiv">  
  <h3>Меню 4</h3>  
  <p><a href = "#">Подменю1</a></p>  
  <p><a href = "#">Подменю2</a></p>  
  <p><a href = "#">Подменю3</a></p>  
  <p><a href = "#">Подменю4</a></p>  
  <p><a href = "#">Подменю5</a></p>  
  </div>  
</div>