

<style type="text/css">
ul#level-one{
background:
 #FFFFFF url("images/menu-back.png") repeat-x bottom left;;
background:
 -moz-linear-gradient(top,  #FFFFFF,  #f0f0f0);
background:
 -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0));
line-height: 36px;
list-style: none ;
position: relative;
width: 90%;
height: 36px;
} 

ul#level-two{
background:
 #FFA500 url("images/menu-grad.png") repeat-x;
background:
 -moz-linear-gradient(top, #FFA500, #FF4500);
background:
 -webkit-gradient(linear, left top, left bottom, from(#ffa500), to(#ff4500));
display: none;
list-style: none ;
margin: auto;
padding: 12px;
position: absolute;
width: 200px;
}


ul#level-two li{
   line-height: 30px;
   padding-left: 6px;
   width: 200px;
} 

ul#level-one li:hover > ul#level-two{
   display: block;
}

ul#level-two li:hover{
background:
 #FFFFFF url("images/menu-li.png") repeat-y;
background:
 -moz-linear-gradient(top,  #FFFFFF,  #C0C0C0);
background:
-webkit-gradient(linear, left top, left bottom, from(#FFF), to(#C0C0C0));
} 

a {
   color: #FFFFFF ;
   text-decoration: none;
   width: 200px;
} 

</style>

<ul id=level-one> <!-- For creating the main menus. -->
<li>First</li>
<li>Second 
	<ul id=level-two> <!-- For creating the sub menus. -->
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
		<li><a href=#>sub-Second</a></li>
	</ul>
</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>  

