Drop UP Menu?

'Salve galera

Já achei diversos "drop down menus" na internet, mas estava precisando de um drop "UP" menu!

Achei alguns modelos no google, mas não são do jeito que procuro...

Gostaria de adaptar ESTE menu, para um drop UP

Seria sensacional se este script que postei acima fosse um drop up, com uma "animação" da janela subindo, ao invés de aparecer de uma vez. Seria perfeito ;]

Segue código fonte do script:

<div class="wrapper">

 <div class="mainmenu">
 <ul class="menu">
 <li class="list"><a class="category" href="#Home">Home</a></li>
 </ul>
 <ul class="menu">
 <li class="list">
 <a class="category" href="#about">About Us  »</a>
 <ul class="submenu">
 <li><a href="#about1">About link 1</a></li>
 <li><a href="#about2">About link 2</a></li>
 <li><a href="#about3">About link 3</a></li>
 <li><a href="#about4">About link 4</a></li>
 <li><a class="endlist" href="#about5">About link 5</a></li>
 </ul>
 </li>
 </ul>
 <ul class="menu">
 <li class="list">
 <a class="category" href="#articles">Articles  »</a>
 <ul class="submenu">
 <li><a href="#articles1">Articles link 1</a></li>
 <li><a href="#articles2">Articles link 2</a></li>
 <li><a href="#articles3">Articles link 3</a></li>
 <li><a class="endlist" href="#articles4">Articles link 4</a></li>
 </ul>
 </li>
 </ul>
 <ul class="menu">
 <li class="list">
 <a class="category" href="#news">News  »</a>
 <ul class="submenu">
 <li><a href="#news1">News link 1</a></li>
 <li><a href="#news2">News link 2</a></li>
 <li><a class="endlist" href="#news3">News link 3</a></li>
 </ul>
 </li>
 </ul>
 <ul class="menu">
 <li class="list"><a class="category" href="#donate">Donate</a></li>
 </ul>
 <ul class="menu">
 <li class="list"><a class="category" href="#contact">Contact</a></li>
 </ul>
 </div>
</div>

body {

font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
color: #666;
background-color: #fff;
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
}

a, a:hover, a:active, a:focus {

outline:0;
direction:ltr;
}

.wrapper {
position:relative; height:25px;
}

.mainmenu {
position:absolute;
z-index:100;
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-303px;
width:606px;
}

ul.menu {

padding:0;
margin:0;
list-style:none;
width:100px;
overflow:hidden;
float:left;
margin-right:1px;
}

ul.menu a {

background:#369;
text-decoration:none;
color:#fff;
padding-left:5px;
}

ul.menu li.list {

float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background:url(images/top1.png) no-repeat left bottom;
}

ul.menu li.list a.category {

position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {

margin-right:1px;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;

}

ul.submenu {

float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}

ul.submenu li a {

float:left;
width:120px;
background:#369;
clear:left;
color:#fff;
}

ul.submenu li a.endlist {

background:url(images/bottom1.png);
}

ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {

background:url(images/bottomhover1.png);
}

ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {

background:#900;
margin-right:1px;
color:#fff;
}

Obrigado!