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="navcontainer">
<ul>
<a href="#">Home page</a>
<a href="#">What's new</a>
<a href="#">About us</a>
<div class="submain"><a href="SubMain_who.html" target="_top">Who we work with</a>
<div class="navcontainersub">
<a href="#">Schools</a>
<a href="localauthorities.html" target="_top">Local Authorities</a>
<a href="#">Charities</a>
</div>
</div>
<div class="submain"><a href="SubMain_services.html" target="_top">Our services</a>
<div class="navcontainersub">
<a href="#">Well-Being</a>
<a href="#">EAP</a>
<a href="#">Headspace</a>
<a href="#" class="current">Training &amp; development</a>
</div>
</div>
<a href="#">Contact 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*