Pop Out Menu Doesnt work in IE 6

[westoncansingpun]

I can't even count the number of websites with pop out sub menus and i have never run into this problem.

i have a list type navigation that has a sub menu in it. i have it styled in CSS and am using a :hover on my list item to display my sub menu. i also have a javascript running for IE to add a class name of hover to the list Item when moused over.

the sub menu is absolutely positioned in the relatively positioned list item. so when you mouse over the list item it makes the UL display:block;

This is all simple stuff but for some reason it will not wok in IE 6 and under, and it has me stumped. Can someone please take a look, maybe i missed something.

the website is:
http://www.avallo.com/test/polycast
and the css is:
http://www.avallo.com/test/polycast/css/default.css

Please Help!

Here is the navigation css for a quick referance.

/* =nav
-----------------------------------------------------------------------------*/

#nav{
	float:left;
	width:175px;
	margin:25px 0 20px 25px;
	padding:0 0 200px 0;
	background:url(../images/logoMark.gif) center bottom no-repeat;
	display:inline; /* <-- IE 6 Double Margin Bug Fix */
	position:relative;
}
#nav ul{
	list-style:none; 
	border:1px solid #75a1ce;
	border-width:1px 0 0 0;
	background:url(../images/logoMark.gif) center bottom no-repeat;
	margin:0;
	padding:0;
	position:relative;
}
#nav ul li{
	position:relative;
	display:block;
	float:left;
	width:175px;
}
#nav ul li a{
	display:block;
	padding:0;
	text-align:left;
	width:174px;
	float:left;
	text-indent:20px;
	color:#fff;
	font-size:15px;
	letter-spacing:1px;
	background:#1861ae;
	border:1px solid #75a1ce;
	border-width:0 0 1px 0;
	line-height:25px;
	text-decoration:none;
}
#nav ul li a:hover{
	color:#333;
	background:#75a1ce;
}
#nav ul li ul{
	display:none;
	position:absolute;
	top:-1px;
	left:169px;
	padding:0 0 0 5px;
	margin:0 0 0 0 ;
	border-width:1px 1px 0 0;
	list-style:none;
	z-index:5000; 
}
#nav ul li.hover ul,
#nav ul li:hover ul
{display:block;}



#nav ul li ul li a{
	padding:3px 10px;
	width:150px;
	text-indent:0px;
	border-width:0 0 1px 1px;
	line-height:18px;
}

The HTML:

	<div id="nav">
		<ul class="clearfix">
			<li><a href="index.php">Home</a></li>
			<li><a href="production.php">Production</a>
				<ul class="clearfix">
					<li><a href="production.php">Equipment List</a></li>
					<li><a href="production2.php">90&deg; Presses</a></li>
					<li><a href="production3.php">Capabilities</a></li>
				</ul>
			</li>
			<li><a href="rim.php">RIM Molding</a></li>
			<li><a href="#">Materials</a></li>
			<li><a href="served.php">Industries Served</a></li>
			<li><a href="about.php">About Us</a></li>
			<li><a href="iso.php">ISO Certification</a></li>
			<li><a href="contact.php">Contact Us</a></li>
		</ul>
	</div>

The Javascript:

/* =IE Menu dropdown support
-----------------------------------------------------------------------------*/
function listHover() {
	if (document.all && document.getElementsByTagName) {
		li = document.getElementsByTagName("li");
		var x = "hover"
		for (i in li) {
			node = li[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function(){this.className=((!empty(this.className)) ? this.className+" "+x : x);}
				node.onmouseout=function(){this.className=this.className.replace(x, "");}
			}
		}
	}
}


/* =Helper Functions
-----------------------------------------------------------------------------*/
function empty(x){	return ((x == '' || x == null) ? true : false);}

[markbrown4]

Hmm, i'm drawing at straws here:

#nav ul li.hover ul,
#nav ul li:hover ul
{display:block;}

I think you have some funky characters in the above bit of code, the two lines look identical but testing in Firefox the first one line alone doesn't work, the second line alone does?

Try removing the first line and making it

#nav ul li:hover ul { display: block }

[westoncansingpun]

The top line specifies a class name for the LI element. Since IE6 and under don't support pseudo classes on elements, (other than anchor tags) you have to add a class name to elements that you want to behave differently. The JavaScript added a class name of "hover" to the element you are moused over. The JavaScript doesn't work in FireFox because of the line:
" if(!document.all) return false; "
So taking out that line of CSS will not change anything in FireFox, and then for sure it will not work in IE.

I have tested the script it works fine, it is adding a class name in IE of "hover" to the LI element on "mouseover" and removing them "onmouseout".

Thank you for your post though.

Update:
When removing position:absolute; like changing it to position:relative; it works in both browsers... but it has to be positioned absolutely in order for the menu to behave properly....

Has anyone heard of something like that before?

Thanks in advance for any help.

[markbrown4]

Gee, I completely missed that one was a '.' and one was a ':'. the eyesight's going.

Try setting position relative on the anchors themselves and not the li elements.

[westoncansingpun]

The UL element is inside of the LI Elements and not the A tags. putting the UL inside of an anchor tag is semantically incorrect because it is an inline element. the LI has to be the one positioned relative so the UL has a reference point to position from.

[westoncansingpun]

Ok if anyone ever runs into this problem i just figured it out.

it was the width on the "#nav ul li a" i dont know why but this works:

#nav ul li a{
	display:block;
	padding:0;
	text-align:left;
/*	width:174px;
	float:left;*/
	text-indent:20px;
	color:#fff;
	font-size:15px;
	letter-spacing:1px;
	background:#1861ae;
	border:1px solid #75a1ce;
	border-width:0 0 1px 0;
	line-height:25px;
	text-decoration:none;
}