Dropdown not working in IE6

Rahul++

Rahul++

SuperUser
Skilled
Huh.. After messing with, In which catagory to post.. I decided to post this over here :eek:hyeah:, I hope moderators will move the thread in right section if it's in wrong...

Ok... I am designing one website [personal].. It has few on Hover Dropdown links..

I tested.. they are working great with Firefox and others.. but not working in IE6

here is CSS -
Code: 
#nav {
	background:#F90 url(../images/nav_bg.gif) bottom repeat-x;
	height:3.1em;
	border-right:0.1em solid #ff7800;
}

#nav li a {
	text-decoration:none;
	display:block;
	float:left;
	background:#F90 url(../images/nav_bg.gif) bottom repeat-x;
	line-height:1.6em;
	color:#FFF;
	font-weight:bold;
	padding:0.5em 2em;
	border-right:0.1em solid #F90;
}

#nav li a:hover {
	background:#F90 url(../images/nav_bg_over.gif) bottom repeat-x;
}

#nav li {
	float:left;
	font-size:1.2em;
	border-right:0.1em solid #ff7800;
	position:relative;
}

/* dropdown */

#nav li li {
	padding:0;
	margin:0;
	height:2.5em;
	line-height:2.5em;
	float:none;
	font-size: 0.9em;
	border:0;
	text-indent:0.2em;
	display:inline;
}

#nav li li a {
	color:#CCC;
	display:block;
	text-align:left;
	width:15em;
	border:0;
	* font-size:0.9em;
	* width:17.2em;
	background:transparent;
	float:none;
}

#nav li ul {
	position:absolute;
	margin-top:2.6em;
	left:-999em;
	background:#242424;
}

#nav li ul li a:hover { 
	color:#FFF; 
	background:#F90 url(../images/nav_bg.gif) bottom repeat-x;
}

#nav li:hover ul, #nav li:hover ul, #nav li.sfhover ul {
	position:absolute;
	left:-999em;
}

#nav li:hover ul, #nav li.sfhover ul {
	left:0;
	width:17.1em;
	padding:0;
	z-index:1000;
}

And here is the html code -
Code: 
<ul id="nav">
	<li class="menu sfHover">[url="objective.html"]Objectives[/url]
		<ul>
			[*][url="vision.html"]Our Vision[/url]
			[*][url="mission.html"]Our Mission[/url]
			[*][url="goal.html"]Our Goal[/url]
		[/list]
[/list]

Can anyone tell me how to fix it??

Thanks in advance...
 
hold on...I'll try and update

Edit: This worked for me

hovermenunc9.jpg


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<style type="text/css">

#nav {

	background:#F90 url(../images/nav_bg.gif) bottom repeat-x;

	height:3.1em;

	border-right:0.1em solid #ff7800;

}

#nav li a {

	text-decoration:none;

	display:block;

	float:left;

	background:#F90 url(../images/nav_bg.gif) bottom repeat-x;

	line-height:1.6em;

	color:#FFF;

	font-weight:bold;

	padding:0.5em 2em;

	border-right:0.1em solid #F90;

}

#nav li a:hover {

	background:#F90 url(../images/nav_bg_over.gif) bottom repeat-x;

}

#nav li {

	float:left;

	font-size:1.2em;

	border-right:0.1em solid #ff7800;

	position:relative;

}

/* dropdown */

#nav li li {

	padding:0;

	margin:0;

	height:2.5em;

	line-height:2.5em;

	float:none;

	font-size: 0.9em;

	border:0;

	text-indent:0.2em;

	display:inline;

}

#nav li li a {

	color:#CCC;

	display:block;

	text-align:left;

	width:15em;

	border:0;

	* font-size:0.9em;

	* width:17.2em;

	background:transparent;

	float:none;

}

#nav li ul {

	position:absolute;

	margin-top:2.6em;

	left:-999em;

	background:#242424;

}

#nav li ul li a:hover { 

	color:#FFF; 

	background:#F90 url(../images/nav_bg.gif) bottom repeat-x;

}

#nav li:hover ul, #nav li:hover ul, #nav li.sfhover ul {

	position:absolute;

	left:-999em;

}

#nav li:hover ul, #nav li.sfhover ul {

	left:0;

	width:17.1em;

	padding:0;

	z-index:1000;

}

</style> 

    <title>Untitled Page</title>

</head>

<body>

<ul id="nav">

	<li class="sfHover">[url="objective.html"]Objectives[/url]

		<ul>

			[*][url="vision.html"]Our Vision[/url]

			[*][url="mission.html"]Our Mission[/url]

			[*][url="goal.html"]Our Goal[/url]

		[/list]
[/list]

</body>

</html>
 
Fixed -

Added on Dropdown Javascript in folder

Code: 
<!-- Javascript for Suckerfish Dropdown 		

		sfHover = function() {

			var sfEls = document.getElementById("nav").getElementsByTagName("LI");

			for (var i=0; i<sfEls.length; i++) {

				sfEls[i].onmouseover=function() {

					this.className+=" sfhover";

				}

				sfEls[i].onmouseout=function() {

					this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

				}

			}

		}

		if (window.attachEvent) window.attachEvent("onload", sfHover);

		

-->
 
Back
Top