Блог проба: Меню акордеон

<style>

#mymenu {

width: 200px;

margin: 0 auto;

}

#mymenu .mydiv {

width: 200px;/*ширина всего меню*/

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: 10px;

-webkit-border-radius: 10px;

}

.mydiv h3{height: 40px;

cursor:pointer;

margin: 0 0 0 0;

text-align: center;

color:white;padding: 12px 0px 0px 0px;

border-radius: 5px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

background: #8b00ff;/*цвет наружного меню*/

}

#mymenu p {

text-align: center;

margin: 0 0 1px 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: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

background: #0065db; /*цвет фона внутреннего меню*/

filter: progid:DXImageTransform.Microsoft.gradient

( startColorstr='#E1A3370', endColorstr='#E1A337',GradientType=0 );

}

#mymenu p:hover {

background: #999999;

cursor:pointer;

}

#mymenu div:hover > p {

height: 40px;padding: 12px 0px 0px 0px;

}

* html #mymenu .mydiv {

filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 );

height: 45px;

overflow: hidden;

forIE: expression(

onmouseover = function() {this.className += ' hover'},

onmouseout = function() {this.className = this.className.replace('hover', '')}

);

}

* html #mymenu .mydiv.hover {

height: auto;

}

#mymenu p a {

color:white;

}

</style>

<h3 >Название заголовка 1</h3>