Need Help with IE6 and IE7...

[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 http://bluedataesl.com/ie.png
I am using this css menu http://sperling.com/examples/menuh/ .

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("http://bluedataesl.com/images/rarrow.gif");
	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.

[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