Horizontal to Vertical Menu

programming web dev
1

I’ve created a horizontal menu but my client wants vertical so since this is my first time doing this I was wondering if someone could assist me converting it from Horizontal to Vertical. Here is the code.


<div id="block1"><div id="navigation">
<!--<div class="nav">
<ul>
<li>
<a href="index.html">Home</a>
</li>


<li>
<a href="aboutus.html">About Us</a>
</li>


<li>
<a href="products.html">Products</a>
<ul>
<li><a href="carpet.html">Carpet</a></li>
<li><a href="ceramic.html">Ceramic + Stone Tile</a></li>
<li><a href="resilient.html">Resilient</a></li>
<li><a href="hardwood.html">Hardwood</a></li>
<li><a href="laminate.html">Laminate</a></li>
<li><a href="matting.html">Matting + </a></li>
<li><a href="accessories.html">Accessories</a></li>
</ul><!--product sub menu-->
<!--</li>


<li>
<a href="services.html">Services</a>
<ul>
<li><a href="design.html">Design Support</a></li>
<li><a href="estimating.html">Estimating</a></li>
<li><a href="project.html">Resilient</a></li>
<li><a href="hardwood.html">Project Management</a></li>
<li><a href="installation.html">Installation</a></li>
<li><a href="refresh.html">Refresh</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
</ul><!--product sub menu-->
<!--</li>




<li>
<a href="install.html">Install</a>
<ul>
<li><a href="corporate.html">Corporate</a></li>
<li><a href="retail.html">Retail</a></li>
<li><a href="project.html">Resilient</a></li>
</ul><!--product sub menu-->
<!--</li>
</ul>
</div><!--end of navigation-->

CSS


#navigation{
	position:absolute;
	width:165px;
	height:372px;
	margin: 0px 0px 0px 58px;
	background-color:#ff6501;
	
}


.nav ul {
	list-style:none; margin: 0; padding:0;	z-index:1000;
}


.nav li {
	float:left; width:100px; background-color:#006699; text-align:center; position:relative; height:30px; line-height:30px;
}


.nav li ul li{
	float:none; width:150px; text-align:left; padding-left:5px; 
}




.nav a {
	text-decoration:none; color:white;
}


.nav li ul {
	position:absolute; top:30px; left:0; visibility:hidden; 
}


.nav li:hover{
	
	background-color:#99c2d6;
}


.nav li:hover ul{ visibility:visible;}

thanks in advanced! =)