Горизонтальная панель навигации не работает в IE6

Question

Моя горизонтальная панель навигации работает нормально с Chrome, Opera, Mozilla, даже IE8, но она не работает на IE6.

Коды следующим образом:

HTML-часть

<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="parent">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-часть

#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;}

Любая помощь будет отличной!Спасибо.

Answer 1

Если вы не укажете, в чем заключается ваша проблема, я не уверен, что это причина, но псевдоселектор :hover поддерживается только для тега a в IE6.

Answer 2

Глядя на ваши правила стиля, это немного сбивает с толку происходящее, поэтому я создал jsfiddle, который должен работать, и он включает jquery, необходимый для работы hover на IE6, а также с одной проблемой: в подменю списка с горизонтальной линией - вам придется выяснить, как решить эту часть самостоятельно. Я изменил правила разметки и стиля, которые были применены, чтобы быть более простым: http://jsfiddle.net/2p7cx/

Answer 3

@ Rfvgyhn правильно.В IE6 :hover работает только на a элементах.

Чтобы исправить это и позволить таким вещам, как div#menuh li:hover, проще всего использовать исправление JavaScript:

Независимо от того, что: hover - http://peterned.home.xs4all.nl/csshover.html