IE6ドロップダウンの問題

Question

IE6で表示するためにドロップダウンを取得することに問題があります。ここで 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; 
} 

そのプレビューリンクがあるすべてのヘルプは大幅にここ

をいただければ幸いIE7と8で正常に動作するようです

Answer 1

コードには次のコードが含まれます。.list ul ul li:hover

IE6は<a>タグを除き、:hoverをサポートしていません。これはIE6でこのようなことをサポートしようとする際の大きな問題の1つであり、IE6が大きな市場シェアを失うまでCSSメニューが実際に普及しなかった理由の1つです。

良いニュースは、IE6がどの要素でもホバーをサポートするようにするためのハックがあることです。

最もよく知られているものはWhatever:hoverです。 IE6ユーザーがJavascriptをオフにしていない場合、これはインストールするのが非常に簡単です（IE特有のCSSの1つの短いビット）。問題は修正されています。

ハックはCSS経由で実行されますが、実際はJavascriptベースです。そのため、ユーザーがJavascriptをオフにしても機能しません。それについては何もすることはできませんが、私が恐れるのは、あなたが得る唯一の解決策だからです。

はるかに優れたソリューションは、単にIE6をサポートしていないということです。これには他にも多くの問題があります。そのような問題はすべて簡単に解決できるわけではありません。

最終的な注記：これはIE6固有の問題であるため、条件付きコメントなどを使用してIE6でのみ動作するようにすることができます。それ以外の場合は、実際にIE7とIE8のために悪化させるかもしれません！ IE7がリリースされる前にこのハックが書かれていたので、私は確かに分かりません。

Answer 2

本当の問題は、IE6はLiをサポートしていません：チェック

<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> 

すべてのブラウザをサポートするであろう、私たちはjQueryの「李」ホバー機能を使用しているタグ

でのみサポートされ、このリンク を合わせますhttp://jsfiddle.net/nPdNd/29/