Помогите с подменю

[woofs]

Непойму как сделать так чтоб подменю принимало высоту взависимости от наполненности

коды:

	<div class="submenu" onclick="subMenuBg1.go(); changeImg(1);" id="head1">
		<div class="imgOpen" id="img1"> </div>
		<span>first element</span>
	</div>
	<div id="subMenuBg1" class="subMenuBg">
			<div><a href="#">menu item ...</a></div>
			<div><a href="#">menu item ...</a></div>
			<div><a href="#">menu item ...</a></div>
			<div><a href="#">menu item ...</a></div>
	</div>


	<div class="submenu" onclick="subMenuBg2.go(); changeImg(2);" id="head2">
		<div class="imgOpen" id="img2"> </div>
		<span>second element</span>
	</div>
	<div id="subMenuBg2" class="subMenuBg">
			<div><a href="menu_like_free-lance2.html">menu item ...</a></div>
	  <div><a href="#">menu item ...</a></div>
			<div><a href="#">menu item ...</a></div>
			<div><a href="#">menu item ...</a></div>
			<div><a href="#">menu item ...</a></div>
			<div><a href="#">menu item ...</a></div>
	</div>	

	<script>
		/* SLIDER BEGIN */
		function $(id) {
			return document.getElementById(id);
		}

		slider = function(name, idhead, scnt) {
			this.step = 0;
			this.stepCnt = scnt;
			this.name = name;
			this.idhead = idhead;
		}

		slider.prototype.go = function() {
			closeAll();
			if (this.step==0) {
				this.goforward();
			} else {
				this.gobackward();
			}
		}

		slider.prototype.func = function(min, max) {
			var zo = this.step/(this.stepCnt-1);
			return min + (max-min)*zo;
		}

		slider.prototype.transform = function() {

		}

		slider.prototype.goforward = function() {
			$(this.name).style.display = "block";
			window.clearTimeout(this.tm);
			if (this.step<this.stepCnt) {
				this.tm = window.setTimeout(this.name+".goforward()", 40);
				this.transform();
				this.step++;
			}
		}

		slider.prototype.gobackward = function() {
			$(this.idhead).style.background = "#89d363 url(close.png) no-repeat 5px 5px;";
			window.clearTimeout(this.tm);
			if (this.step>0) {
				this.step--;
				this.transform();
				this.tm = window.setTimeout(this.name+".gobackward()", 40);
			}
		}

		/* SLIDER END */

		subMenuBg1 = new slider("subMenuBg1", "head1", 8);
		subMenuBg1.transform = function() {
			$("subMenuBg1").style.height = Math.round(this.func(0, 85)) + "px";
		}

		subMenuBg2 = new slider("subMenuBg2", "head2", 8);
		subMenuBg2.transform = function() {
			$("subMenuBg2").style.height = Math.round(this.func(0, 125)) + "px";
		}

		closeAll = function(){
			subMenuBg1.gobackward();
			subMenuBg2.gobackward();
		}
		changeImg = function(id){
			if ($("img"+id).style.display == "block")
			{imgClose();} else {imgClose(); $("img"+id).style.display = "block"}
		}

		imgClose = function(id){
			$("img1").style.display = "none";
			$("img2").style.display = "none";
		}

	</script>

		.submenu		{background: #89d363 url(close.png) no-repeat 5px 5px; color: #FAFAFA; width: 200px; margin-top: 1px; cursor: pointer;}
		.subMenuBg		{width: 200px; height: 0; background-color: #f8fff0; overflow: hidden; display: none;}
		.imgOpen		{background:#89D363 url(open.png) no-repeat scroll 0 0; float:left; line-height:10px; margin-left:5px; margin-top:5px;			width:10px;  display: none;}

		.hide			{display: none; padding-left: 10px;}
		span			{padding-left: 20px;}

Заранее спасибо