Hi

I made slight modification to one of Paul OB's drop down menu, by adding an id before every block of css code see below. The reason for doing this was it was conflicting with other list items within my stylesheet.

Code:
#navholder{
	border-right:1px solid #fff;
	border-left:1px solid #fff;
	font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	height:3em; 
	text-align:center;
	background:url(images/navbg.jpg);
	margin:0 auto;
	width:770px;
}
#navholder ul,li{
	margin: 0;
	padding: 0;
	list-style: none ;
}

#navholder ul li{
	float: left;
}
#navholder li ul{
	position: absolute;
	left: auto; 
	top:auto;
	margin-top: 2.2em;
	display: none;
}
	
/* Styles for Menu Items */
#navholder ul li a{
	border-right:1px solid #f16222;
	border-left:1px solid #fab974;
	display: block;
	text-decoration: none;
	color: #fff;
	background: transparent; /* IE6 Bug */
	margin:10px 0 10px 0;
	padding:0 8px 0 9px;
	float:left;
}
#navholder li a.last{
	border-right:none;
	border-left:1px solid #fab974;
}
#navholder li a.active{
	background:url(images/bground-nav-active.gif) #fab974 no-repeat center top;
}


/* drop down menu \*/ 
#navholder li ul{background:#f58220;}
#navholder li ul li{float:none;border-bottom:1px solid #fab974;white-space:nowrap;}
#navholder li ul a{float:none;border:none;position:relative;margin:0 0 0 0;}

/* commented backslash mac hiding hack \*/ 
* html #navholder ul li{position:relative;}	
* html #navholder li ul {left:0;top:0;}
* html #navholder ul li a{height:1%;}
* html #navholder li ul li a {
	margin-left:-16px;
	height:auto;
	ma\rgin-left:0;
	voice-family: "\"}\""; voice-family:inherit; 
}
* html #navholder li ul li a{height:1px;	width:1px;he\ight:auto;w\idth:auto}
/* end hack */ 

/* this sets all hovered lists to red */
#navholder li:hover a, li.over a,
#navholder li:hover li:hover a, li.over li.over a
{
   color: #fff;
   background-color: #fab974;
   text-align:left;
}

/* set dropdown to default */
#navholder li:hover li a, li.over li a
{
	color: #fff;
	margin-top:0;
   background-color: #f58220;
}
#navholder li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

#navholder ul li:hover ul, ul li.over ul{
	display: block;
}
#navholder ul#nav li#homeiconhome {
	border-left:none;
	border-right:1px solid #f16222;
	display: block;
	margin:10px 0 10px 0;
	padding:0 8px 0 9px;
	width:30px;
	text-align:center;
}
#navholder ul#nav li#homeicon a {
	border-left:none;
	border-right:1px solid #f16222;
	width:30px;
	text-align:center;
}
#navholder ul#nav li#homeicon a:hover {
	background:url(images/icon-home.gif) #fab974 no-repeat 43% 33%;
	width:30px;
	text-align:center;
	text-indent:-999px;
}
This works in FF but not IE, here is the javascript that goes with the css

Code:
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" over";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" over\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
And below is an example of the HTML used for the navigation.

Code:
<div id="navholder">
<ul id="nav">
<li><a href="link.htm">Link 1</a>
<ul>
<li><a href="link.htm">Link 2</a></li> <li><a href="link.htm">Link 3</a></li>
</ul>
</li>
</div>
Hope someone can help as I really need to crack this today.

Thanks