为什么CSS下拉菜单在IE中不工作

我已经创建了CSS下拉菜单，但它在IE中不起作用。但是，在Firefox和Chrome中，它完美运行。我想知道代码中的缺陷是什么，使得它在IE中无法使用！请帮帮忙！.........为什么CSS下拉菜单在IE中不工作

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 =边缘”。 – jkdev

添加到您的HTML文件。 <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

为什么CSS下拉菜单在IE中不工作

回答

相关问题