CSS Dropdown menu doesn't work in IE6

[Jhorra]

As far as I can tell this should work in IE6, but the drop down menus seen under MY PROFILE, CONTESTS, and CASTING do not show for users in IE6. Can anyone help me out?

<div id="nav">
	<ul id="nav_ul">
		<li><a href="/tv">WATCH TELEVISION</a></li>
		<li><a class="drowdown" href="/user">MY PROFILE</a>
			<ul>
				<li><a href="/user">HOME</a></li>
				<li><a href="/profile/professional">EDIT</a></li>
				<li><a href="/profile/myprofile">VIEW</a></li>
				<li><a href="/messages">MESSAGES</a></li>
				<li><a href="/profile/edit/section/photos">PHOTOS</a></li>

				<li><a href="/blogs/view/user/jhorra">BLOG</a></li>
				<li><a href="/user/hotlist">HOT lIST</a></li>
			</ul>
		</li>
		<li><a href="/">COMMUNITY</a></li>
		<li><a href="/user/search">BROWSE</a></li>
		<li><a class="drowdown" href="#">CONTESTS</a>
			<ul>
				<li><a href="/contests/showcontest/contest/1">THE CASTING CALL</a></li>
				<li><a href="/contests/showcontest/contest/2">AFFILIATE CONTEST</a></li>
			</ul>
		</li>								
		<li><a class="drowdown" href="#">CASTING & MEDIA</a>
			<ul>
				<li><a href="#">COMING SOON</a></li>
			</ul>
		</li>
		<li><a href="/corporate/contact">CORPORATE</a></li>
		<li><a href="/login/register">JOIN</a></li>
		<li><a href="/login/logout">LOGOUT</a></li>							
	</ul>
<br class="clearit">
</div>

Here's the CSS

#nav 
{
	height:20px;
	line-height:20px;
	background:#1e1e1e url(/public/images/site_section_heading_bg.jpg) repeat-x;
	font-weight:bold;
}
.clearit 
{
	clear: both;
	height: 0;
	line-height: 0.0;
	font-size: 0;
}
#nav_ul, #nav_ul ul 
{
	padding: 0;
	margin: 0;
	list-style: none;
	font-family: Arial, Helvetica, sans-serif;
}
#nav_ul a 
{
	display: block;
	text-decoration: none;
	padding: 0px;
	color: #FFE400;
}
#nav_ul a.drowdown 
{
	padding: 0px;
}
#nav_ul li 
{
	float: left;
	padding:0px 15px;
}
#nav_ul ul li a  
{
	padding:0px;
}
#nav_ul li ul 
{
	position: absolute;
	display: none;
	background:#1e1e1e;
	height:20px;
	line-height:20px;
}
#nav_ul li:hover a, #nav_ul a:focus,
#nav_ul a:active, #nav_ul li.li_hover a 
{
	color: #FFFFFF;
}
#nav_ul li:hover ul, #nav_ul li.li_hover ul 
{
	display: block;
}
#nav_ul li:hover ul a, #nav_ul li.li_hover ul a 
{
	color: #FFE400;
	background-color: transparent;
}
#nav_ul ul a:hover 
{
	background-color: transparent!important;
	color: #FFFFFF!important;
}
#nav_ul li
 {
 	width: auto;
}

[Dan_A]

IE 6 will not apply li:hover unless you use a htc file or javascript.

[Jhorra]

I guess the hover should really be on the a instead, if I add this do you think it would work?

#nav_ul li a:hover ul, #nav_ul li a:hover ul li
{
display:block
}

[Dr John]

son of suckerfish is the usual answer

[Centauri]

You are using an .li_hover class - are you also using the suckerfish javascript to apply this class as behaviours ?

[Jhorra]

This is the javascript I'm using

function P7_ExpMenu()
{ //v1.1.0.2 by PVII-www.projectseven.com
	if(navigator.appVersion.indexOf("MSIE")==-1)
		{return;}
	var i,k,g,lg,r=/\s*li_hover/,nn='',c,cs='li_hover',bv='nav_ul';
	for(i=0;i<10;i++)
	{
		g=document.getElementById(bv+nn);
		if(g)
		{
			lg=g.getElementsByTagName("li");
			if(lg)
			{
				for(k=0;k<lg.length;k++)
				{
					lg[k].onmouseover=function()
					{
						c=this.className;
						cl=(c)?c+' '+cs:cs;
						this.className=cl;
					};
					lg[k].onmouseout=function()
					{
						c=this.className;
						this.className=(c)?c.replace(r,''):'';
					};
				}
			}
		}
		nn=i+1;
	}
}

[Dan Schulz]

Try using this instead.
http://www.xs4all.nl/~peterned/csshover.html

(PS: You don't need the DIV or the clearer class in your code either.)

[Jhorra]

Figured it out, I never actually told the js function to run