Help fixing CSS Horizontal Drop down in IE6.

[FabienO]

Hi i'm making a webiste and it works perfect in pretty much everything except IE6. The drop down simply doesn't work.

Here is the URL of the website for a preview. http://fabieno.com

Here's the code.

#menu {
  margin-left: auto;
	margin-right: auto;
  width: 904px;
}

ul#navigation-1 {
	margin: 0;
	padding: 1px 0;
	list-style: none;
	width: 100%;
	border-top: 1px solid #000000;
	font: normal 8pt verdana, arial, helvetica;
}
ul#navigation-1 li {
	margin: 0;
	padding: 0;
	display: block;
	float: left;
	position: relative;
  width: 12.5%;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited {
	padding: 4px 0;
	display: block;
	text-align: center;
	text-decoration: none;
	background: #000000;
	color: #ffffff;

}
ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
	padding: 4px 0;
	display: block;
	text-align: center;
	text-decoration: none;
	background: #660066;
	color: #ffffff;
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}
ul#navigation-1 li ul.navigation-2 {
	margin: 0;
	padding: 1px 1px 0;
	list-style: none;
	display: none;
	background: #ffffff;
	position: absolute;
	top: 21px;
	left: -1px;
	border: 1px solid #000000;
	border-top: none;
}
ul#navigation-1 li:hover ul.navigation-2 {
	display: block;
}
ul#navigation-1 li ul.navigation-2 li {
	clear: left;
	width: 146px;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited {
	clear: left;
	background: #000000;
	padding: 4px 0;
	border: none;
	border-bottom: 1px solid #ffffff;
	position: relative;
	z-index: 1000;
}
ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover {
	clear: left;
	background: #660066;
	padding: 4px 0;
	border: none;
	border-bottom: 1px solid #ffffff;
	position: relative;
	z-index: 1000;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	left: 145px;
	top: -2px;
	padding: 1px 1px 0 1px;
	border: 1px solid #000000;
	border-left: 1px solid #000000;
	background: #ffffff;
	z-index: 904;
}
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
	display: block;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
	background: #000000;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
	background: #660066;
}
ul#navigation-1 li ul.navigation-2 li a span {
	position: absolute;
	top: 0;
	left: 128px;
	font-size: 12pt;
	color: #660066;
	font-weight: bold;
}
ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span {
	position: absolute;
	top: 0;
	left: 128px;
	font-size: 12pt;
	color: #ffffff;
	font-weight: bold;
}

HTML

<div id="menu">
        	<ul id="navigation-1">
		<li><a href="index.html" title="Home">Home</a></li>
		<li><a href="#" title="Fundraising">Fundraising</a>
			<ul class="navigation-2">
				<li><a href="#" title="For Charities">For Charities</a></li>
				<li><a href="#" title="For Others">For Others</a></li>
				<li><a href="#" title="Partners">Partners <span>&raquo;</span></a>
					<ul class="navigation-3">
						<li><a href="#" title="Blue Cross Borneo Challenge">Blue Cross Borneo Challenge</a></li>
						<li><a href="#" title="Help for Heroes Falkland's Yomp">Help for Heroes Falkland's Yomp</a></li>
						<li><a href="#" title="Demelza Zambia Challenge">Demeiza Zambia Challenge</a></li>
						<li><a href="#" title="Deaf/Blind Sri Lanka Challenge">Deaf/Blind Sri Lanka Challenge</a></li>
						<li><a href="#" title="Brendon Care Sri Lanka Challenge">Brendon Care Sri Lanka Challenge</a></li>
						<li><a href="#" title="Action Aid India Challenge">Action Aid India Challenge</a></li>
						<li><a href="#" title="Demelza Slovenia Winter Challeng">Demelza Slovenia Winter Challenge</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#" title="Youth">Youth</a>
			<ul class="navigation-2">
				<li><a href="#" title="Schools Colleges">Schools Colleges</a></li>
				<li><a href="#" title="Universities">Universities</a></li>
				<li><a href="#" title="Youth Groups">Youth Groups</a></li>
				<li><a href="#" title="Duke of Edingborough">Duke of Edingborough</a></li>
			</ul>
		</li>
		<li><a href="#" title="Sports">Sports</a>
			<ul class="navigation-2">
				<li><a href="#" title="Rugby">Rugby</a></li>
				<li><a href="#" title="Crick">Cricket</a></li>
				<li><a href="#" title="Football">Football</a></li>
				<li><a href="#" title="Others">Others</a></li>
			</ul>
		</li>
		<li><a href="#" title="Busniess">Business</a>
			<ul class="navigation-2">
				<li><a href="#" title="Employee Volunteering">Employee Volunteering</a></li>
				<li><a href="#" title="Social Responsibility">Social Responsibility</a></li>
				<li><a href="#" title="Team Building">Team Building</a></li>
				<li><a href="#" title="Staff Training">Staff Training</a></li>
				<li><a href="#" title="Charity Funraising">Charity Funraising</a></li>
			</ul>
		</li>
		<li><a href="#" title="Get Involved">Get Involved</a>
			<ul class="navigation-2">
				<li><a href="challengesyoucanjoin.html" title="Open Challenges You Can join">Open Challenges You Can join</a></li>
				<li><a href="#" title="Bespoke Charity Challenges">Bespoke Charity Challenges</a></li>
			</ul>
		</li>
		<li><a href="#" title="Destinations">Destinations</a>
		  <ul class="navigation-2">
		    <li><a href="#" title="">Africa <span>&raquo;</span></a>
		      <ul class="navigation-3">
		        <li><a href="#" title="">Morocco</a></li>
		        <li><a href="#" title="">Tanzania</a></li>
		      </ul>
		    </li>
		    <li><a href="#" title="">Asia <span>&raquo;</span></a>
		      <ul class="navigation-3">
		       <li><a href="#" title="">Sri Lanka</a></li>
		       <li><a href="#" title="">Vietnam</a></li>
		      </ul>
		    </li>
		    <li><a href="#" title="">Europe <span>&raquo;</span></a>
		      <ul class="navigation-3">
		        <li><a href="#" title="">Poland</a></li>
		        <li><a href="#" title="">Slovenia</a></li>
		      </ul>
		    </li>
		    <li><a href="#" title="">South America <span>&raquo;</span></a>
		      <ul class="navigation-3">
		        <li><a href="#" title="">Peru</a></li>
		      </ul>
		    </li>
		  </ul>
		</li>
		<li><a href="#" title="Contact Us">Contact Us</a>
		</li>
	</ul>
      </div>

Any help would be greatly appreciated. Bit of a stick up the butt with this :(.

[jamiemac2005]

Hey, you didn't show the code that actually seems to matter (The JS and the CSS with sfhover in it)... Anyway, the link gave me that, i assume the problem with IE6 is something to do with the Javascript you use (though i cant find it?)...

possibly this line:

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

because theres no else clause so the dropdown just wont load if window.attachEvent isn't found.(Though i think it is in IE6 [sorry i can't test because i don't have IE6])...

Cheers,
Jamey

[FabienO]

Thanks, i ended up replacing the menu with a suckerfish one then just customized the pants off it. IE is the bane of my existence!

I am having an interesting issue ATM where if you highlite some text in IE then hover over menu's they stay dropped down. -_- can see it at http://www.FabienO.com . Thought i'd mention it here rather than posting again.