Navcontainer and IE6 problem

[tricky76]

Hi,

I've built this navigation using CSS Navcontainer (with Pbmod's help) and it works perfect in every browser and platform apart from IE6!

Here is the HTML

[HTML]<div id="navcontaine r">
<ul>
<a href="#">Home page</a>
<a href="#">What's new</a>
<a href="#">About us</a>
<div class="submain" ><a href="SubMain_w ho.html" target="_top">W ho we work with</a>
<div class="navconta inersub">
<a href="#">School s</a>
<a href="localauth orities.html" target="_top">L ocal Authorities</a>
<a href="#">Charit ies</a>
</div>
</div>
<div class="submain" ><a href="SubMain_s ervices.html" target="_top">O ur services</a>
<div class="navconta inersub">
<a href="#">Well-Being</a>
<a href="#">EAP</a>
<a href="#">Headsp ace</a>
<a href="#" class="current" >Training &amp; development</a>
</div>
</div>
<a href="#">Contac t us</a>
</ul>
</div>[/HTML]

and the CSS

#navcontainer {
	float: left;
	padding-top: 0px;
	padding-bottom: 5em;
	width: 173px;
	text-align:left;
	}
	
#navcontainer ul {
	margin: 0;
	padding: 0;
	border: 0;
	font: 12px Trebuchet MS, verdana, arial, sans serif;
	letter-spacing: -0.2px;
	text-indent: 24px;
	height: 21px;
	width:171px;
	list-style:none;
	}
	
#navcontainer a {
	background: url(../images/nav_back.gif);
	display: block;
	width: 171px;
	padding-top: 6px;
	height: 20px;
	}

#navcontainer a:link, #navcontainer a:visited {
		color:#000000;
		text-decoration: none;
		}
		
#navcontainer a:hover {
	background: url(../images/nav_back_man.gif);
	color:#FFFFFF;
	text-decoration: none;
	padding-top: 6px;
	height: 20px;
	}	

#navcontainer .submain:hover a {
	background: url(../images/nav_back_man.gif);
	}

#navcontainer .submain .current {
	background: url(../images/nav_back_man.gif);
	color:#FFFFFF;
	}

#navcontainer .submain:hover .navcontainersub a{
	background: url(../images/nav_sub_hover.gif);
	color:#666666;
	}

#navcontainer .submain .navcontainersub:hover a {
	background: url(../images/nav_sub_hover.gif);
	color:#666666;
	font: 11px Trebuchet MS,verdana, arial, sans serif;
	text-indent: 30px;
	height: 17px;
	}
	
	/* No Hover on Nav*/
#navcontainer .submain .navcontainersub a {
	background: url(../images/nav_sub_hoverw.gif);
	height: 20px;
	color:#666666;
	font: 11px Trebuchet MS,verdana, arial, sans serif;
	text-indent: 30px;
	height:17px;
	}

#navcontainer .submain .navcontainersub {
	background: url(../images/nav_sub_hover.gif);
	}
	
/*------ Sub Nav ------*/

#navcontainer .submain .navcontainersub .current {
	background: url(../images/nav_sub_hover_c.gif);
	color:#FFFFFF;
	}
	
#navcontainer .submain:hover .navcontainersub .current{
	background: url(../images/nav_sub_hover_c.gif);
	color:#666666;
	}


.navcontainersub a {
	background: url(../images/nav_sub_hover.gif);
	display: block;
	letter-spacing: -0.3px;
	width: 171px;
	padding-top: 5px;
	height: 18px;
	}
	
.navcontainersub a:link, .navcontainersub a:visited {
	background: url(../images/nav_sub_hoverw.gif);
	color:#666666;
	text-decoration: none;
	}

It basically makes the sub nav hover when you hover over the main section - check the link here in something better than IE6 PC to see what I mean...

LINK

[drhowarddrfine]

IE6 does not work with hover on any element but <a>.

[tricky76]

I've found this:

a:hover {
	color: #f00;
	}

And then inserting any undeclared property within this class. Would this get around the problem or is it unreliable?

[drhowarddrfine]

That is the only way IE6 understands hover.

[pbmods]

IE6 does not work with hover on any element but <a>.

Ohhhhhhhhhhhhh good. *sigh*