Horizontal navigation bar not working in IE6

My horizontal navigation bar is working fine with Chrome, Opera, Mozilla, even IE8 but it's not working on IE6.

Codes as follows:

HTML part

<div id="mainNav" class="container">
  <div id="menuh">
    <ul>
      <li><a href="index.html" class="top_parent">Home</a></li>
      <li><a href="about.html" class="top_parent">About Us</a></li>
      <li><a href="why_us.html" class="top_parent">Why Us?</a>
        <ul>
          <li><a href="services.html" class="parent">What I can do for you</a></li>
          <!-- No need to anchor to [#ancService1] -->
          <li><a href="services.html#ancWhatyouget" class="parent">What you can get</a></li>
          <li><a href="services.html#ancTestimonials" class="paren开发者_如何学JAVAt">Testimonials</a></li>
        </ul>
      </li>
      <li><a href="free_resources.html" class="top_parent">Free Resources</a></li>
      <li><a href="how_much.html" class="top_parent">How Much?</a></li>
      <li><a href="contact.html" class="top_parent">Contact</a></li>
      <li><a href="register.html" class="top_parent">Register</a></li>
    </ul>
  </div>
</div>

CSS part

#mainNav {height: 30px;}

#menuh {
    font-size: 0.9em;
    width:80%;
    float:left;
    position: absolute;
}

#menuh a {
    text-align: center;
    display:block;
        white-space:nowrap;
    margin:0;
    padding: 3px 15px 3px 15px;
    border-right: 1px solid #036; 
    height: 24px;
}

#menuh a:visited, #menuh a:active {
    color: white;
    text-decoration:none;
}
#menuh a.parent:link {
    color: white;
    background-color: #204988;
    text-decoration:none;
}

#menuh a.top_parent {
    background-position: right center;
    background-repeat: no-repeat;
    height: 24px;
    padding: 10px 15px 0 15px;
}
#menuh a.top_parent:hover {
    color: #8CBA01;
    text-decoration:none;
    background-image: url(../_images/img_nav.jpg);
    background-repeat: repeat-x;
}

#menuh a.parent {
    background-position: right center;
    background-repeat: no-repeat;
    height: 24px;
    padding: 7px 15px 0 15px;
}
#menuh a.parent:hover {
    color: #8CBA01;
    background-color: #036;
    text-decoration:none;
}
#menuh ul {
    list-style:none;
    margin:0;
    padding:0;
    width: auto;
}
#menuh li {
    float:left;
    position:relative;  
}

#menuh li li a {
    text-align: left;
    width: 140px;
}

#menuh ul ul {
    position:absolute;
    z-index:500;
    top:auto;
    display:none;
}

div#menuh li:hover {
    cursor:pointer;
    z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul
{display:block;}

Any help would be great! Thanks.

---

Without you stating what your problem is, I'm not sure this is the cause, but the :hover pseudo-selector is only supported on the a tag in IE6.

---

Looking at your style rules it's a little confusing what's going on, so I made a jsfiddle that should work, and it includes the jquery necessary to make the hover work on IE6 as well with one problem: the list sub-menu displays with the li horizontally - you'll have to figure out how to resolve that part yourself. I changed the markup and style rules applied to be more straightforward: http://jsfiddle.net/2p7cx/

---

@Rfvgyhn is correct. In IE6, :hover only works on a elements.

To remedy this and allow things like div#menuh li:hover to work, the easiest solution is to use a JavaScript fix:

Whatever:hover - http://peterned.home.xs4all.nl/csshover.html