<ul id="pgmenu">
	<li>
		<a href="#" class="sub">Main menu<span>&nbsp;</span></a>
		<ul>
			<li><a href="#">Drop Down Menu</a></li>
			<li><a href="#">Drop Down Menu</a></li>
			<li><a href="#">Drop Down Menu</a></li>
			<li><a href="#">Drop Down Menu</a></li>
			<li><a href="#">Drop Down Menu</a></li>
			<li><a href="#">Drop Down Menu</a></li>
			<li><a href="#">Drop Down Menu</a></li>
			<li><a href="#">Drop Down Menu</a></li>
			<li><a href="#">Drop Down Menu</a></li>
			<li><a href="#">Drop Down Menu</a></li>
		</ul>
	</li>
	<li>
		<a href="#" class="sub">Import<span>&nbsp;</span></a>
		<ul>
			<li><a href="#">Slide Effect</a></li>
			<li><a href="#">Slide Effect</a></li>
			<li><a href="#">Slide Effect</a></li>
			<li><a href="#">Slide Effect</a></li>
			<li><a href="#">Slide Effect</a></li>
			<li><a href="#">Slide Effect</a></li>
		</ul>
	</li>
	<li><a href="#">Export</a></li>
	<li><a href="#">Help</a></li>
</ul>

pgmenu
	{	margin: 0;
		padding: 0
		}
 
	#pgmenu li
	{	float: left;
		list-style: none;
		font-size: 12px;
		}
 
	#pgmenu li a span{
		background:red;
		padding:2px 0 2px 6px;
		background:url("img/desc.gif") no-repeat center right;
	}
 
	#pgmenu li a
	{	display: block;
		background: #777;
		padding: 4px 12px;
		text-decoration: none;
		color: #000;
		white-space: nowrap;
		}
 
	#pgmenu li.pgmv a{
		background:  #2f6795;
		color:#d5e1ea; 
	}
 
	#pgmenu li a:hover{	
		background: #2f6795;
		color:#d5e1ea; 
		}
 
	#pgmenu li ul
	{	margin: 0;
		position: absolute;
		visibility: hidden;
		width:150px;
		padding:2px;
		background: #2f6795;
	}
 
	#pgmenu li ul li
	{	float: none;
		display: inline}
 
	#pgmenu li ul li a
	{	width: auto;
		color:#d5e1ea;
		border:none;
		background: #2f6795;}
 
	#pgmenu li ul li a:hover
	{
		background:black;
		color:#ffffff;
	}

	//-- Menu variables -------------
	var timeout    = 0;
	var closetimer = 0;
	var menuItem = 0;
 
	$(document).ready(function(){
 
		//-- Page dropdown menu
		document.onclick = dropMenu_close;
 
		$('#pgmenu > li').bind('mouseover', dropMenu_open);
		$('#pgmenu > li').bind('mouseout',  dropMenu_timer);		
 
		$('#pgmenu>li>ul,#pgmenu>li>ul>li').mouseover(function(){
			var parent = $(this).parents('li');
			$(parent).addClass('pgmv');
		});
 
		$('#pgmenu>li>ul, #pgmenu>li>ul>li').mouseout(function(){
			var parent = $(this).parents('li');
			$(parent).removeClass('pgmv');
		});
 
	});
 
	function dropMenu_open()
	{  
		dropMenu_canceltimer();
		dropMenu_close();
		menuItem = $(this).find('ul').css('visibility', 'visible');
		}
 
	function dropMenu_close()
	{  
		if(menuItem) menuItem.css('visibility', 'hidden');
	}
 
	function dropMenu_timer()
	{  
		closetimer = window.setTimeout(dropMenu_close, timeout);
	}
 
	function dropMenu_canceltimer()
	{  
		if(closetimer){
			window.clearTimeout(closetimer);
			closetimer = null;
		}
	}