Member Avatar for bhagu

Hi,

I need help with horizontal dropdown css menu. It works fine with IE8, FF and Chrome.
My client is using IE 6. Here's link
I am using this css menu .

Menu at http://bluedataesl.com
I follow step by step instructions. but nothing seem to work for me.

Below is my CSS code which I am using for the menu.

#menuh-container
	{
	height: auto;
	margin-left: 18px;
	float: left;
	}

#menuh
	{
	font-size: small;
	font-family: arial, helvetica, sans-serif;
	width:100%;
	float:left;
	}
		
#menuh img
	{
	border: 0px;
	}
#menuh a
	{
	display:block;
	/* border: 1px solid #555; 
	text-align: center;*/
	white-space:nowrap;
	margin:0;
	/* padding: 0.3em; */
	}
	/*
#menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest 
	{
	color: white;
	background-color: royalblue;
	text-decoration:none;
	}
	
#menuh a:hover						/* menu on mouse-over  
	{
	color: white;
	background-color: cornflowerblue;
	text-decoration:none;
	}	
	*/
	
#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
	background-image: url(navdown_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}

/* about us */	
#menuh a.dpur	/* attaches side-arrow to all parents */
	{
	padding: 10px;
	background: #6c3883;
	color: white;
	text-decoration: none;
	font-weight: bold;
	}
#menuh a.dpur:hover 
	{
	background:#520a70;
	}

/* Admission */
#menuh a.pur	/* attaches side-arrow to all parents */
	{
	padding: 10px;
	background: #993ee3;
	color: white;
	text-decoration: none;
	font-weight: bold;
	}
#menuh a.pur:hover 
	{
	background:#8a11ec;
	}
	
	/* Courses */
#menuh a.grn	/* attaches side-arrow to all parents */
	{
	padding: 10px;
	background-color: #81c443;
	color: white;
	text-decoration: none;
	font-weight: bold;
	}
#menuh a.grn:hover 
	{
	background:#6ebb17;
	}
	
#menuh a.grnsub	/* attaches side-arrow to all parents */
	{
	padding: 10px;
	background-color: #6ebb17;
	color: white;
	text-decoration: none;
	font-weight: bold;
	}
#menuh a.grnsub:hover 
	{
	background:#81c443;
	}
	
#menuh a.arrow, #menuh a.arrow:hover {
	background-image: url("");
	background-position: right center;
	background-repeat: no-repeat;
	}
	
/* Faqs */
#menuh a.red	/* attaches side-arrow to all parents */
	{
	padding: 10px;
	background: #cd5d5c;
	color: white;
	text-decoration: none;
	font-weight: bold;
	}
#menuh a.red:hover 
	{
	background:#c23c3b;
	}
#menuh ul
	{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width: auto;	/* width of all menu boxes */
	/* NOTE: For adjustable menu boxes you can comment out the above width rule.
	However, you will have to add padding in the "#menh a" rule so that the menu boxes
	will have space on either side of the text -- try it */
	}

#menuh li
	{
	position:relative;
	min-height: 1px;		/* Sophie Dennis contribution for IE7 */
	vertical-align: bottom;		/* Sophie Dennis contribution for IE7 */
	}

#menuh ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1.2em 0 0 -1em;
	}

#menuh ul ul ul
	{
	top:0.2em;
	left:100%;
	}

div#menuh li:hover
	{
	cursor:pointer;
	z-index:100;
	}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

Anything will help. Thanks.

  • 2 Contributors
  • 1 Reply
  • 199 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

Most likely cause: IE6 only supports :hover on anchors (the a element). The menu code in the thread uses li:hover rules to reveal submenus, so IE6 never fires those rules. As suggested, loading an IE6-only stylesheet with conditional comments is fine for style tweaks, but the hover behavior itself needs either a tiny JS shim or a small HTML/CSS restructure so the hover is on an a element.

A minimal, widely used fix is to add an IE6-only script that adds a hover class to li elements on mouseover. Insert this inside an IE conditional comment (so only IE6/older runs it):

<!--[if lte IE 6]>
<script type="text/javascript">
(function(){
  var nav = document.getElementById('menuh');
  if(!nav) return;
  var lis = nav.getElementsByTagName('li');
  for(var i=0;i<lis.length;i++){
    lis[i].onmouseover = function(){
      if(this.className.indexOf('hover') === -1) this.className += ' hover';
    };
    lis[i].onmouseout = function(){
      this.className = this.className.replace(/\bhover\b/g,'').replace(/\s+/g,' ').replace(/^\s+|\s+$/g,'');
    };
  }
})();
</script>
<![endif]-->

Then use the hover-class rule (same place your li:hover rules live):

div#menuh li.hover ul { display: block; }

Extra IE6 tips: add display:inline; to floated li to avoid the double-margin bug, use zoom:1; on containers that need hasLayout (fixes stacking/z-index oddities), prefer top:100%; left:0; for submenus instead of fragile negative margins, and verify a standards DOCTYPE so positioning behaves predictably. If you want a pure-CSS path, rework the markup so the visible trigger is an a and use a:hover to reveal submenus — that will work in IE6 but may require HTML changes.

Member Avatar for MJ Pieterse

you will have to create another style sheet (or section within your style sheet) that works with IE6 and call it with conditional commenting

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.