SOLVED!
Specials Thanks to @tfburges from codingforums.com
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<style type="text/css">
.UpMenus {
position:absolute;
bottom:50%;
left:50%;
width:102px;
height:126px;
margin:63px 0px 0px -50px;
padding:0px;
border:0px;
border-bottom:1px solid #00f;
list-style-type:none;
overflow:visible;
}
.UpMenus li {
position:relative;
float:left;
width:100px;
height:16px;
padding:2px 0px;
border:1px solid #00f;
border-bottom:0px;
background:#fff;
font:normal 12px sans-serif;
text-align:center;
overflow:visible;
cursor:pointer;
cursor:hand;
}
.UpMenus li:hover {
background:#00f;
color:#fff;
}
.UpMenus li ol {
position:absolute;
bottom:21px;
width:98px;
height:0px;
margin:0px;
padding:0px;
border:1px solid #00f;
border-top:0px;
border-bottom:0px;
list-style-type:none;
overflow:hidden;
}
.UpMenus li ol.Up {
border-top:1px solid #00f;
}
.UpMenus li ol li {
color:#000;
border:0px;
border-bottom:1px solid #99f;
}
.UpMenus li ol li:hover {
background:#99f;
color:#fff;
}
</style>
<script type="text/javascript">
$(function(){
$('.UpMenus > li').click(function(){
var ol = $(this).children('ol');
var h = ol.height()?0:ol.children('li').length*21;
var d = 0;
ol.parent().parent().children('li').each(function(){
if (d) {
$(this).children('ol').animate({height:'0px'},800,function(){$(this).removeClass('Up');});
$(this).animate({top:'0px'},800);
} else if (!$(this).is(ol.parent())) {
$(this).children('ol').animate({height:'0px'},800,function(){$(this).removeClass('Up');});
$(this).animate({top:(h?-h:'0')+'px'},800);
} else {
if (h) ol.addClass('Up');
ol.animate({height:h+'px'},800);
$(this).animate({top:'0px'},800,function(){if(!h){ol.removeClass('Up')}});
d = 1;
}
});
});
});
</script>
</head>
<body>
<ul class="UpMenus">
<li>
Menu 1
<ol>
<li>Sub 1 for Menu 1</li>
<li>Sub 2 for Menu 1</li>
</ol>
</li>
<li>
Menu 2
<ol>
<li>Sub 1 for Menu 2</li>
<li>Sub 2 for Menu 2</li>
<li>Sub 3 for Menu 2</li>
<li>Sub 4 for Menu 2</li>
</ol>
</li>
<li>
Menu 3
<ol>
<li>Sub 1 for Menu 3</li>
<li>Sub 2 for Menu 3</li>
<li>Sub 3 for Menu 3</li>
</ol>
</li>
<li>
Menu 4
<ol>
<li>Sub 1 for Menu 4</li>
<li>Sub 2 for Menu 4</li>
<li>Sub 3 for Menu 4</li>
<li>Sub 4 for Menu 4</li>
<li>Sub 5 for Menu 4</li>
</ol>
</li>
<li>
Menu 5
<ol>
<li>Sub 1 for Menu 5</li>
<li>Sub 2 for Menu 5</li>
<li>Sub 3 for Menu 5</li>
<li>Sub 4 for Menu 5</li>
<li>Sub 5 for Menu 5</li>
<li>Sub 6 for Menu 5</li>
<li>Sub 7 for Menu 5</li>
</ol>
</li>
<li>
Menu 6
<ol>
<li>Sub 1 for Menu 6</li>
<li>Sub 2 for Menu 6</li>
</ol>
</li>
</ul>
</body>
</html>
