css dropdown menu, skal skubbe den næste ned

Hej alle

Jeg prøver på at lave en vertikal menu med css. Alle eksempler man kan finde på en css menu med dropdown / multi level, er enten horisontale med drop down under, eller vertikale med en multi level til siden.
Jeg har brug for noget kode som gør at drop downen kommer under punket som det hører til og skubber det næste punkt ned og klapper sammen igen når man forlader området.

Her er siden, hvor under menuen vises over det næste menupunkt:
http://lise-grafik.dk/lise-grafik1/menu-test/index.html

Nogen der ved hvordan man får den til at "folde" den ud og dermed "skubber" det næste punkt ned ad.

Jeg bruger li og ul

index.html

<ul class="nav">	
			<li><a href="#">HOME</a></li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">PORTFOLIO</a>
				<ul>
					<li><a href="#">H1</a></li>
					<li><a href="#">H2</a></li>
					<li><a href="#">H3</a></li>
				</ul>
			</li>
			<li><a href="#">CONTACT<a></li>
		</ul>

CSS-koden

.nav li { 
  list-style-type:none; 
  height:30px;
	overflow:visible;
 } 
 
ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
	padding-top:0px;
	cursor: default;
	list-style-type: none;
	display: inline;
	height:0px;
}

ul.nav{
	display: table; /*hvis denne ikke er med kan man kun se drop downen, men så snart man prøver at flytte musen over den*/
}

li.nav>ul{
	/*display: table-cell;*/
	position: relative;
	width:0px; /*bredden på hvert enkelt hoved punkt*/
	height:22px;
	background-color:none; /*kassen rundt om hver eneklet hovedpunkts farve*/

}

ul.nav li>ul{
/*Make the sub list items invisible*/
	display: none;
	position: absolute;
	/*width: 120px; bredden på dropdownen*/
	margin-left: 0px;/*placeringen af dropdown under hovedpunketet*/
	margin-top: 8px;
	/*background-color: #000000; color på dropdown*/
	/*height:31px; højeden på dropdown*/
	padding-left:0px;/*indside padding på teksten i dropdown*/
	

}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
	display : block;
	background-color: #ffeecd;/*baggrundsfarven på dropdownwn*/
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
	display: block;
	padding:0px;

}

ul.nav,
.nav ul,
.nav ul li a{
	background-color: none; /*color på boxen om hovedpunkterne*/
	color:#fff;

}