html code
 
<ul id="menu">
   <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">About GMU</a>
      <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
             <a href="#">History & Mission</a>
             <a href="#">Office of the President</a>
             <a href="#">Office of the Provost </a> 
             <a href="#">Administration</a> 
             <a href="#">News & Publications</a> 
             <a href="#">Visitor Information</a> 
             <a href="#">Facts & Statistics</a> 
             <a href="#">Social Media</a> 
             <a href="#">Employment</a> </div>
   </li>
   <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Admissions</a>
      <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()"> <a href="#">Apply Now</a> <a href="#">Request for material</a> <a href="#">Admission Process</a> <a href="#">Fees Details</a> <a href="#">Undergraduate</a> <a href="#">Postgraduate</a> <a href="#">By College</a> <a href="#">Visitor information</a> <a href="#">Parent information</a> </div>
   </li>
   <li><a href="#" 
        onmouseover="mopen('m3')" 
        onmouseout="mclosetime()">Colleges & Academics</a>
      <div id="m3" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()"> <a href="#">Colleges</a> <a href="#">Departments</a> <a href="#">Summer Training</a> <a href="#">Clinical Skills lab</a> <a href="#">Online Academic Catalogs</a> <a href="#">Academic calendars</a> <a href="#">Simulation Center</a> <a href="#">Academic Advising</a> </div>
   </li>
   <li><a href="#" 
        	onmouseover="mopen('m4')" 
       		onmouseout="mclosetime()">Health Care</a>
      <div id="m4" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()"> <a href="#">History & Mission</a> <a href="#">Our Hospitals</a> <a href="#">Services & Features</a> <a href="#">Laboratory</a> <a href="#">Pharmacy</a> </div>
   </li>
   <li><a href="#" 
        	onmouseover="mopen('m5')" 
       		onmouseout="mclosetime()">Health Communications</a>
      <div id="m5" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()"> <a href="#">CNE Programs</a> <a href="#">Health Magazines</a> <a href="#">Conferences and workshops</a> <a href="#">Sponsorship Details</a> <a href="#">Media Kit</a> </div>
   </li>
   <li><a href="#" 
        	onmouseover="mopen('m6')" 
       		onmouseout="mclosetime()">Library</a>
      <div id="m6" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()"> <a href="#">Online Catalog</a> <a href="#">Journals</a> <a href="#">Research & Dtabases</a> <a href="#">Links</a> <a href="#">Services</a> <a href="#">Contact Details</a> </div>
   </li>
   <li><a href="#" 
        	onmouseover="mopen('m7')" 
       		onmouseout="mclosetime()">Research</a>
      <div id="m7" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()"> <a href="#">Mission</a> <a href="#">Objectives</a> <a href="#">Contact Details</a> </div>
   </li>
   <li><a href="#">Campus life</a></li>
   <li><a href="#">Alumni</a></li>
   <li><a href="#">My GMU</a></li>
  </ul>
 
 
 
 
CSS code
 
#menu
{	margin: 0;
	padding: 0;
	z-index: 1}
 
#menu li
{
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-family: sans-serif;
	font-size: 11px;
	font-weight: bold;
 
}
 
#menu li a
{
	display: block;
	width: auto;
	color: #6A6A6A;
	text-align: center;
	text-decoration: none;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 8px;
	padding-right: 15px;
	padding-bottom: 2px;
	padding-left: 16px;
	background-image: url(images/bu_top_bg_gray_bev.jpg);
	height: 23px;
 
}
 
#menu li a:hover
{
	color: #283A50;
	background-image: url(images/bu_top_bg_gray_bev1.jpg);
}
 
#menu div
{
	position: absolute;
	visibility: hidden;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #C4C4C4;
	border-right-color: #C4C4C4;
	border-bottom-color: #C4C4C4;
	border-left-color: #C4C4C4;
	background-color: #CECECE;
}
 
	#menu div a
	{
	position: relative;
	display: block;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #ECECEC;
	color: #747474;
	font-family: sans-serif;
	font-size: 11px;
	font-weight: normal;
	padding-top: 5px;
	padding-right: 14px;
	padding-bottom: 5px;
	padding-left: 14px;
	height: 15px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1px;
	margin-left: 0;
}
 
	#menu div a:hover
	{	background: #49A3FF;
		color: #FFF}
 
 
Javascript:
 
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;
 
// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();
 
	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 
	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';
 
}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
 
// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}
 
// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}
 
// close layer when click-out
document.onclick = mclose;