<script type="text/javascript">
$(function() {$('#ui_element').find('li').hide();
$('#ui_element').find('.m_itemMain').toggle(
function(){
var $this = $(this);
$this.addClass('m_down').removeClass('m_up');
var $menu = $this.prev();
var t = 50;
$($menu.find('li').get().reverse()).each(function(){
var $li = $(this);
var showmenu = function(){$li.show();};
setTimeout(showmenu,t+=50);});},
function(){
var $this = $(this);
$this.addClass('m_up').removeClass('m_down');
var $menu = $this.prev();
var t = 50;
$($menu.find('li').get().reverse()).each(function(){
var $li = $(this);
var hidemenu = function(){$li.hide();};
setTimeout(hidemenu,t+=50);});}); });
</script>

.m_wrapper{height:30px; /*--Это высота контейнера--*/
line-height:30px; /*--Изменять как и высоту--*/
width:200px; /*--Здесь можно изменить ширину всего контейнера--*/
float:left;
clear:both;
position:relative;
margin:10px;
font-family: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
font-size:12px;
text-transform:uppercase; /*-Больше ничего не будем изменять здесь-*/
}
.m_itemMain{color:#fff; /*-Это цвет текста кнопки которая показывает все меню-*/
z-index:10;
border:1px solid #333; /*-Это цвет рамки-*/
background-color:#777; /*-Это цвет фона-*/
background-repeat:no-repeat;
background-position:95% 50%;
cursor:pointer;
text-align:left;
text-indent:10px;
width:200px; /*-Это ширина кнопки-*/
position:absolute;
top:0px;
left:0px;
text-shadow:1px 1px 1px #000;
-moz-border-radius:3px; /*-Скругление углов-*/
-webkit-border-radius:3px; /*-Скругление углов-*/
border-radius:3px; /*-Скругление углов-*/
}
.m_down{
background-image:url(http://getelement.3dn.ru/materials/PopoutMenu/down.png); /*-Ссылка на стрелочку вниз-*/
}
.m_up{background-image:url(http://getelement.3dn.ru/materials/PopoutMenu/up.png); /*-Ссылка на стрелочку вверх-*/
}
.m_wrapper ul {
list-style:none;
padding:2px 0px 0px 0px;
width:100%;
position:absolute;
bottom:30px;
left:0px;
}
.m_wrapper ul li a{
text-decoration:none;
cursor:pointer;
display:block;
padding:3px 0px;
line-height:20px;
text-indent:10px;
letter-spacing:1px;
color:#ddd; /*-Это цвет текста ссылок-*/
background-color:#525252; /*-цвет фона-*/
border:1px solid #333; /*-Рамка-*/
margin:3px 0px;
text-shadow:1px 1px 1px #000;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
background:-webkit-gradient(linear, left bottom, left top, color-stop(0.12, rgb(51,51,51)),
color-stop(0.56, rgb(82,82,82)) )
background:-moz-linear-gradient(center bottom,rgb(51,51,51) 12%,rgb(82,82,82) 56%)
-moz-box-shadow:0px 0px 2px #333 inset;
-webkit-box-shadow:0px 0px 2px #333 inset;
box-shadow:0px 0px 2px #333 inset;
} /*-Цвет фона задан градиентом (можно удалить если нужен однотонный цвет)-*/

.m_wrapper ul li a:hover{background:#333; /*-Цвет фона списка при наведении-*/
color:#fff; /*-Цвет текста списка при наведении-*/
-moz-box-shadow:0px 0px 3px #ddd inset;
-webkit-box-shadow:0px 0px 3px #ddd inset;
box-shadow:0px 0px 3px #ddd inset; /*-Тень для списка при наведении-*/
}