0

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;
3
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by Armadillo
0

Suggest you go read up on the son of suckerfish way of making menus. Your way will fail with javascript disabled and requires you to write lots of code for each link.

Suckerfish is sooooo much easier to use. just add the twelve line script via an external javascript file to the head, and make unordered lists of your dropdown menu. so easy to read and find errors in as well.
www.htmldog.com is where you'll find it.

Edited by drjohn: n/a

0

You only provided a partial page coding so I will have to assume you have a problem in your <head> ....</head> tags. The reason I say this is because you are using HTML and CSS, IE6 will not render a lot of CSS correctly unless you have included the correct <DOCTYPE> for your document.

Make sure this statement appears at the very top of your document.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Michael

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.