0

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.

2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by MJ Pieterse
1

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

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.