dropdown menu position problem

[phpnoob]

Hi I have a simple js flyout drop down menu, and i have a position problem, hope some1 can help me, i try every1 i can imagine.If i click 2011 or lower year the month position is where the current year are , that not good, cause if i click the lowest year the month go to down, i want to position the month sub menu to the top of the first year. HTML

<div class="menu"><ul id="dropdownmenu"><li class="sub"><a>2012</a><ul><li><a>01</a></li><li><a>02</a></li></ul></li> <li class="sub"><a>2011</a><ul><li><a>01</a></li><li><a>02</a></li></ul></li></ul><script type="text/javascript"> clickMenu('dropdownmenu'); </script></div>

CSS

.menu {font-size:90%; float:right; margin:0 0px 50px 0;}.menu ul {padding:0; margin:0; list-style-type:none; width:60px;}.menu li {position:relative; height:21px;}.menu a, .menu a:visited {font-family:verdana, sans-serif; display:block; text-align: center; text-decoration:none; height:20px; line-height:20px; color:#000; border:1px solid #fff;}.menu ul ul {visibility:hidden; position:absolute;top:0px; left:-30px; width:30px;}.menu ul li.click ul {visibility:visible;}

JS

function clickMenu(menu) {var getEls = document.getElementById(menu).getElementsByTagName("LI");var getAgn = getEls;for (var i=0; i<getEls.length; i++) {   getEls[i].onclick=function() {	for (var x=0; x<getAgn.length; x++) {	getAgn[x].className=getAgn[x].className.replace("unclick", "");	getAgn[x].className=getAgn[x].className.replace("click", "unclick");	}   if ((this.className.indexOf('unclick'))!=-1) {	this.className=this.className.replace("unclick", "");;	}	else {	this.className+=" click";	}   }  }}

thx for helping

[phpnoob]

some1 else figure it out, it just need to remove position:relative; in .menu li and add to .menu anyway, thx for read my post