IE6 выпадающий вопрос

Question

У меня проблема с отображением выпадающего меню в IE6.Кажется, он хорошо работает в IE7 и 8. Любая помощь будет принята с благодарностью

Вот ссылка для предварительного просмотра: http://arrowheadproducts.net.c1.previewmysite.com/2010Nov/index.aspx

Вот HTML:

 <div id="nav">
    <div id='leftheader_top'><img src='images/logo2.jpg' /></div>
 <div id="top_nav01"><a id="nav01" href="index.aspx"></a></div>
  <div id="top_nav02">  
  <div class='list'>
  <ul>
    <li><a id="nav02" href="products.aspx"></a>
        <ul>
        <li><a border='0' id="drop_01" href="metalsystemsandproducts.aspx"></a></li>
        <li><a border='0' id="drop_02" href="compositesystemsandcomponents.aspx"> </a></li>
        </ul>
    </li>
 </ul>
</div>
</div>
<div id="top_nav03">
<div class='list'>
 <ul>
    <li><a id="nav03" href="services.aspx"></a>
        <ul>
        <li><a border='0' id="drop_02_01" href="engineering.aspx"></a></li>
        <li><a border='0' id="drop_02_02" href="testing.aspx"></a></li>
        <li><a border='0' id="drop_02_03" href="manufacturing.aspx"></a></li>
        </ul>
    </li>
  </ul>
</div>
</div>
<div id="top_nav04">
<div class='list'>
 <ul>
    <li><a id="nav04" href="support.aspx"></a>
        <ul>
        <li><a border='0' id="drop_03_01" href="warranty.aspx"></a></li>
        <li><a border='0' id="drop_03_02" href="quality.aspx"></a></li>
        <li><a border='0' id="drop_03_03" href="aftermarketdistribution.aspx"></a></li>
        <li><a border='0' id="drop_03_04" href="supplychainmanagement.aspx"></a></li>
        </ul>
    </li>
  </ul>
</div>
</div>
<div id="top_nav05">
<div class='list'>
 <ul>
    <li><a id="nav05" href="company.aspx"></a>
        <ul>
        <li><a border='0' id="drop_04_01" href="history.aspx"></a></li>         
        <li><a border='0' id="drop_04_02" href="contacts.aspx"></a></li>
        <li><a border='0' id="drop_04_03" href="sitemap.aspx"></a></li>
        <li><a border='0' id="drop_04_04" href="legal.aspx"></a></li>
        </ul>
    </li>
  </ul>
</div>
</div>
</div>

</div>

CSS:

    .list ul {
    margin: 0;
    padding: 0;
    float: left; 
}

    .list ul li{
    list-style: none;
}

    .list ul ul {
    position: absolute;
    list-style: none;
   z-index: 500;
}

    .list ul ul a {
    text-decoration: none;
}

    .list ul ul li a:hover {
    text-decoration: none;
    display: block;
}

    .list ul ul li {
}

    .list ul ul li:hover {
    text-decoration: none;
    display: block;
}

    div.list ul ul {
    display: none;
}

    div.list ul ul,
    div.list ul li:hover ul ul,
    div.list ul ul li:hover ul ul
    {display: none;position:relative;}

    div.list ul li:hover ul,
    div.list ul ul li:hover ul,
    div.list ul ul ul li:hover ul
    {display: block;position:relative;}

    div.list img {
    vertical-align: middle;
    overflow: hidden;
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
}

Answer 1

Ваш код включает это: .list ul ul li:hover

IE6 не поддерживает :hover, кроме тегов <a>.Это одна из основных проблем с попыткой поддержки такого рода вещей в IE6, и это одна из причин того, что CSS-меню действительно не стали популярными, пока IE6 не начал терять значительную долю рынка.

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

Самый известный из них - Независимо от: hover .Это очень просто установить (один короткий кусочек специфичного для IE CSS), и проблема исправлена, если пользователь IE6 не выключил Javascript.

Хак запускается через CSS, нофактически на основе Javascript, поэтому, если пользователь отключил Javascript, он не будет работать.Боюсь, с этим ничего нельзя поделать, поскольку это практически единственное решение, которое вы получите.

Гораздо лучшее решение - просто больше не поддерживать IE6 - у него много других проблем.и не у всех из них есть хорошее простое решение, подобное этому.

И последнее замечание: поскольку это специфическая для IE6 проблема, вы можете использовать условные комментарии или что-то подобное, чтобы убедиться, что они работают только вIE6.В противном случае вы могли бы на самом деле сделать хуже для IE7 и IE8!(Я точно не знаю, так как этот хак был написан до выхода IE7, и я уже несколько лет не использую его).

Answer 2

Реальная проблема заключается в том, что ie6 не поддерживает li: hover, который поддерживает только тег

поэтому мы используем функцию наведения "li" в jQuery, которая будет поддерживать все браузеры

<script type="text/javascript">
  $('ul#nav li').hover(function()
              {
              $(this).find('ul').stop(true,true).slideDown()
              },
              function()
              {
              $(this).find('ul').stop(true,true).slideUp()
});
</script>

проверьте эту ссылку http://jsfiddle.net/nPdNd/29/