its working in Firefox and IE 8
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;