Member Avatar for shaikanwar14

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
  • 182 Views
  • 8 Months Discussion Span
  • Latest Post Latest Post by Armadillo

Dani AI

Generated

A few focused checks will usually expose why a dropdown that works in modern browsers breaks only in IE6. Start by confirming the page is rendered in standards mode (the DOCTYPE must be present and be the very first line); IE6 often falls into quirks mode when the DOCTYPE is missing or misplaced, which changes box-model and positioning behavior. This is the simplest thing to verify and is exactly the point raised. (learn.microsoft.com)

Two small CSS changes commonly fix the rest of the symptoms seen in IE6 (positioning oddities, submenu appearing in the wrong place, or being hidden behind other content):

/* IE6-friendly adjustments (add to existing rules) */
#menu li { position: relative; zoom: 1; }   /* create containing block + trigger hasLayout in IE6 */
#menu div { top: 100%; left: 0; z-index: 9999; }  /* explicit offset and high stacking order for submenu */

Making each menu item a positioned container gives absolutely positioned submenus the correct reference box; zoom: 1 is the lightweight IE-only way to trigger hasLayout so positioning and z-index behave predictably. Also add an explicit z-index to the submenu because stacking contexts can quarantine z-index values (so a large z-index on the submenu only matters inside its stacking context). (learn.microsoft.com)

The JavaScript/event approach can also matter: attaching open/close handlers to the anchor (<a>) can allow the hover to be lost while the pointer crosses into the submenu; attaching the same handlers to the parent li (or using a Suckerfish-style UL/LI + small IE polyfill as suggested) is more robust across old IE versions. The original Suckerfish pattern and its small DOM shims remain a concise, proven option. (alistapart.com)

Quick debugging tips: temporarily force the submenu visible and give it a bright background/outline to see where it renders; remove the global click-to-close while testing to rule out event interference; and test the trimmed menu in IE6 (or an IE6 VM) so the scope is minimal. If a quick test page shows the menu working after the DOCTYPE + hasLayout/z-index changes, the full site will follow.

Recommended Answers

All 2 Replies

Member Avatar for drjohn

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 because: n/a
Member Avatar for Armadillo

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.