IEでCSSドロップダウンメニューが機能しない理由

CSSドロップダウンメニューを作成しましたが、IEでは機能しません。しかし、FirefoxとChromeでは完全に動作します。私はIEで動作しないようにするコードの不具合は何ですか？あなたのhtmlファイルにこれを追加！.........IEでCSSドロップダウンメニューが機能しない理由

ul { 
 
    list-style: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    float: left; 
 
    left: 40%; 
 
    display: inline; 
 
} 
 
ul li { 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    left: 85px; 
 
} 
 
li ul { 
 
    display: none; 
 
    margin: 0; 
 
} 
 
ul li a { 
 
    display: block; 
 
    background: #660000; 
 
    padding: 5px 10px 5px 10px; 
 
    text-decoration: none; 
 
    white-space: nowrap; 
 
    color: #fff; 
 
    border-left: 1px solid #660000; 
 
    border-right: 1px solid #660000; 
 
} 
 
ul li a:hover { 
 
    background: #3300cc; 
 
    margin: 0; 
 
} 
 
li:hover ul { 
 
    display: block; 
 
    position: absolute; 
 
    margin: 0; 
 
} 
 
li:hover li { 
 
    float: none; 
 
} 
 
li:hover a { 
 
    background: #3300cc; 
 
} 
 
li:hover li a:hover { 
 
    background: #660000; 
 
} 
 
.drop-nav li ul li { 
 
    border-top: 0px; 
 
    position: relative; 
 
    padding: 0px; 
 
    z-index: 100; 
 
    border-bottom: 0px; 
 
    margin: 0; 
 
    right: 0; 
 
    left: 0; 
 
} 
 
li li:hover a { 
 
    display: block; 
 
} 
 
li li ul a { 
 
    display: none; 
 
    border-left: 1px solid #660000; 
 
    margin-left: 60px; 
 
    margin-top: -30px; 
 
    margin-bottom: 30px; 
 
} 
 
li:hover li:hover ul li a:hover { 
 
    background: #660000; 
 
    margin-top: -30px; 
 
    margin-bottom: 30px; 
 
    margin-left: 60px; 
 
    border-left: 1px solid #660000; 
 
}

<div class="nav"> 
 
    <ul class="drop-nav"> 
 
    <li><a href="item1.html">Item 1</a> 
 
    </li> 
 
    <li><a href="#">Item 2</a> 
 

 
     <a href="item2_sub_1.html">Item 2 sub 1</a> 
 
    </li> 
 
    <li><a href="item2_sub_2.html">Item 2 sub 2</a> 
 
    </li> 
 
    <li><a href="item2_sub_3.html">Item 2 sub 3</a> 
 
    </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item 3</a> 
 
    <ul> 
 
     <li><a href="#">Item 3 sub 1 &raquo;</a> 
 
     <ul> 
 
      <li><a href="item3_sub_1_1.html">Item 3 sub 1.1</a> 
 
      </li> 
 
      <li><a href="item3_sub_1_2.html">Item 3 sub 1.2</a> 
 
      </li> 
 
      <li><a href="item3_sub_1_3.html">Item 3 sub 1.3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Item 3 sub 2 &raquo;</a> 
 
     <ul> 
 
      <li><a href="item3_sub_2_1.html">Item 3 sub 2.1</a> 
 
      </li> 
 
      <li><a href="item3_sub_2_2.html">Item 3 sub 2.2</a> 
 
      </li> 
 
      <li><a href="item3_sub_2_3.html">Item 3 sub 2.3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="item3_sub_3.html">Item 3 sub 3</a> 
 
     </li> 
 
     <li><a href="item3_sub_4.html">Item 3 sub 4</a> 
 
     </li> 
 
     <li><a href="item3_sub_5.html">Item 3 sub 5</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="item4.html">Item 4</a> 
 
    </li> 
 
    <li><a href="#">Item 5</a> 
 
    <ul> 
 
     <li><a href="item5_sub_1.html.html">Item 5 sub 1</a> 
 
     </li> 
 
     <li><a href="item5_sub_2.html.html">Item 5 sub 2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="item6.html">Item 6</a> 
 
    </li> 
 
    <li><a href="item7.html">Item 7</a> 
 
    </li> 
 
    <li><a href="item8.html">Item 8</a> 
 
    </li> 
 
    </ul> 
 
</div>

出典

2016-06-28 Rose

IEのどのバージョンですか？ – jkdev

私はIE 10と思われます – Rose

HTMLファイルの先頭に '<！DOCTYPE HTML>'を、文書の ''（Ctcの答えのように）に ''タグを追加します。それでもうまくいかない場合は、「」タグの「IE = 9」を「IE = edge」に変更してください。 – jkdev

を助けてください。 <meta http-equiv="X-UA-Compatible" content="IE=9"/>をご使用の場合は、<!DOCTYPE HTML>

出典

2016-06-28 01:44:15 Ctc

これらのタイプのエラーについては、開発ツールにアクセスして、CSSのコンパイルエラーが見つかるかどうかを確認してください。私はあなたのシナリオをシミュレートしていません。

しかし、あなたが直面しているような同様の問題に遭遇しました。いくつかのスタイルはFirefoxとChromeではうまくいきましたが、IEとエッジではうまくいきませんでした。

IEの要素を調べたときに、何らかの理由で構文エラーが発生しました。私はそのスタイルを正確に思い出すことはできません。しかし、問題のあるスタイルが続くと仮定します。

font-size：16p;

これは「font-size：16px」と解釈される可能性があります。また、この構文エラーはChromeとFirefoxでは無視される可能性がありますが、IEはそれらをキャッチしてそのスタイルを適用しない可能性があります。

これは、このような種類の問題が原因である可能性があります。私の提案は、開発者ツールの問題のあるスタイルをチェックして解決することです。

出典

2016-06-28 19:21:03

IEでCSSドロップダウンメニューが機能しない理由

答えて

関連する問題