Menu list in IE6 sub not dropping

i know that ie6 has a problem with :hover visibilty and child selectors, but cannot see why my sub menu is not dropping? i have included code and would be grateful if someone could tell me where my error is? this is a follow on from replies recevied in an earlier post. you will notice that i have tried the htc file behavior and that is not working for me either. thanks

<ul id="navigation" class="nav-main">
            <li><a href="http://www.somedomain.com/">Home</a></li>
            <li class="list"><a href="#">Freebies</a>
          <ul class="nav-sub">
            <li><a href="http://www.somedomain.com/category/backgrounds/">Backgrounds</a></li>
            <li><a href="http://www.somedomain.com/category/buttons/">Buttons</a></li>
            <li><a href="http://www.somedomain.com/category/graphics/">Graphics</a></li>
            <li><a href="http://www.somedomain.com/category/html-css/">HTML &amp; CSS</a></li>
            <li><a href="http://www.somedomain.com/category/icons/">Icons</a></li>
            <li><a href="http://www.somedomain.com/category/psd/">PSD</a></li>
            <li><a href="http://www.somedomain.com/category/templates/">Templates</a></li>
            <li><a href="http://www.somedomain.com/category/tutorials/">Tutorials</a></li>    
          </ul>
            </li>

            <li class="list"><a href="#">About</a>
          <ul class="nav-sub">
            <li><a href="http://www.somedomain.com/about/">AboutUs</a></li>
            <li><a href="http://www.somedomain.com/commercial-use/">Commercial Use</a></li>
            <li><a href="http://www.somedomain.com/about/terms-of-use/">Terms Of Use</a></li>
          </ul>
          </li>

            <li><a href="http://www.somedomain.com/advertise/">Advertise</a></li>
            <li><a href="http://www.somedomain.com/contact/">Contact</a></li>


        </ul>


body    {

    behavior: url(csshover3.htc);
}

#navigation {
    margin:0;
    padding: 0;
    clear:both;
    width:999px;
    height:51px;
    background: #d6eaf8 url(../images/dropdown-bg.gif) repeat-x left top;
}


ul.nav-main,
ul.nav-main li {
    list-style: none;
    margin: 0;
    padding: 0;
}


ul.nav-main {
    position: relative;
    z-index: 597;
}

ul.nav-main li:hover > ul {
    visibility: visible;

}


ul.nav-main li.hover,
ul.nav-main li:hover {
    position: relative;
    z-index: 599;
    cursor: pointer;
    background: url(../images/dropdown-bg-hover.gif) repeat-x left top;

}



ul.nav-main li {
    float:left;
    display:inline-block ;
    height: 100%;
    color: #999;
    font: 14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
    background: url(../images/separator.gif) no-repeat right center;

}

ul.nav-main li a {
    display:inline-block;
    padding: 16px 16px 0 16px;
    height: 35px;
    color: #fff;
    font: 14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
    text-decoration:none;
}

ul.nav-main li a:hover {
    color:#D6D6D6;

}



ul.nav-main *.list {
    padding-right: 22px;
    background: url(../images/navigation-arrow.gif) no-repeat right top;
}



ul.nav-sub {
    display:block;
    position: absolute;
    padding:10px;
    top: 48px;
    left: 0;
    z-index: 598;
    background: #353535 url(../images/dropdown-list-bg.gif) repeat-x left top;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000开发者_如何转开发;
    border-left: 1px solid #000;

}


ul.nav-sub li {
    list-style:none;
    display:block;
    padding: 0;
    height: 27px;
    float: none;
    width:145px;
    border-bottom: 1px solid #5a5a5a;
    background: none;

}

ul.nav-sub li a {
    list-style:none;
    display:none;
    padding: 6px 5px 6px 5px;
    height: 15px;
    float: none;
    width:145px;
    background: none;
    font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;

}

ul.nav-main li:hover ul.nav-sub {     display:none; /* OR display:list-item */ } 

You will need to use some Javascsript for IE6.

li:hover is your problem. IE6 only supports hover on anchor tags (and probably some form elements, I can't remember now, but definately not <li>s)

If your content is already around anchor tags you can try changing your CSS to attach the hover property to the anchors instead of the li's. It will likely still be problematic however.

If this doesn't work try adding display: inline-block to the anchor tags. Otherwise you'll have to hack it with javascript.

<li><a>content</a></li>

ul.nav-main li a:hover > ul {
    visibility: visible;

}


ul.nav-main li a.hover,
ul.nav-main li a:hover {
    position: relative;
    z-index: 599;
    cursor: pointer;
    background: url(../images/dropdown-bg-hover.gif) repeat-x left top;

}

Something like that. The hover property for anything besides anchor tags is problematic in early versions of IE. You could also alternatively try something like this:

http://www.danvega.org/blog/index.cfm/2008/1/1/CSS-hover-selector

Bearing in mind that you're already using Whatever:hover..

Without actually testing in IE6, there is one problem that I can see:

ul.nav-main li:hover > ul {
    visibility: visible;
}

That's using > (the direct child selector), which is not implemented in IE6.

Try replacing that selector with ul.nav-main li:hover ul or ul.nav-main li:hover .nav-sub.