CSS下拉菜单在IE10中无法正常工作

我不知道你是否可以帮助我。我试图用HTML和CSS创建一个下拉菜单。但是，我的悬停功能在IE10中不像以前那样工作。它适用于其他浏览器，如Firefox和Chrome，但不适用于IE10。CSS下拉菜单在IE10中无法正常工作

我的HTML代码

<html> 
<head> 
<!--[if IE]> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
<![endif]--> 

<link rel = "stylesheet" type = "text/css" href = "style.css" /> 
</head> 

<body> 
<div class = "centeredmenu"> 
    <ul> 
     <li><a href = "#">Home</a></li> 

     <li><a href = "#">Client</a> 
      <ul> 
       <li><a href = "#">Create Client</a></li> 
       <li><a href = "#">View Clients</a></li> 
      </ul> 
     </li> 

     <li><a href = "#">Invoices</a> 
      <ul> 
       <li><a href = "#">Search</a></li> 
       <li><a href = "#">View All</a></li> 
      </ul> 
     </li> 

     <li><a href = "#">Suppliers</a> 
      <ul> 
       <li><a href = "#">Add Supplier</a></li> 
       <li><a href = "#">View All</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 
</body> 
</html>

我的CSS代码

.centeredmenu ul li ul { display:none; } 

.centeredmenu ul li:hover > ul { display:block; } 

.centeredmenu ul li ul li ul { display:none; } 

.centeredmenu ul li ul li:hover > ul { display:block; } 

.centeredmenu ul { 
    background:#9bbe3c; 
    width:99.8%; 
    margin-top:0.5%; 
    z-index:1; 
    list-style:none; 
    position:relative; 
    display:inline-table; 
    font-family:'Calibri' !important; 
    font-size:1em; 
    border:1px solid #596f1b; 
} 

.centeredmenu ul:after { content: ""; clear:both; display:block; } 

.centeredmenu ul li { float:left; } 

.centeredmenu ul li a { 
    display:block; 
    color:#fff; 
    text-decoration:none; 
    padding:14px 22px 14px 23px !important; 
} 

.centeredmenu ul li a:hover{ background:#586f1b; } 

.centeredmenu ul li ul { background:#9bbe3c; position:absolute; top:94.5%; width:200px; } 

.centeredmenu ul li ul li { float:none; position:relative; } 

.centeredmenu ul li ul li ul { background:#9bbe3c; position:absolute; left:101%; top:-1%; }

来源

2013-06-20 user2482793

习惯的力量，但仍然不回答我的问题 – user2482793

当我把你的HTML和CSS上的jsfiddle，它按预期工作。

当您在您的计算机上访问时可能会出现其他问题。

<div class = "centeredmenu"> 
    <ul> 
     <li><a href = "#">Home</a></li> 

     <li><a href = "#">Client</a> 
      <ul> 
       <li><a href = "#">Create Client</a></li> 
       <li><a href = "#">View Clients</a></li> 
      </ul> 
     </li> 

     <li><a href = "#">Invoices</a> 
      <ul> 
       <li><a href = "#">Search</a></li> 
       <li><a href = "#">View All</a></li> 
      </ul> 
     </li> 

     <li><a href = "#">Suppliers</a> 
      <ul> 
       <li><a href = "#">Add Supplier</a></li> 
       <li><a href = "#">View All</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

参考LIVE DEMO

来源

2013-06-20 15:21:46

感谢您的帮助 – user2482793

我遇到了完全一样的问题。原来我失踪了。

进入我的HTML页面的顶部以下解决我的问题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

来源

2013-07-15 01:57:22

的问题是，IE10呈现在“怪癖”模式。所以如果你把它改成“标准”模式，它应该可以正常工作。

添加以下在您的网站的头，迫使IE 10，如果你正在使用PHP的使用标准模式 ...信贷的答案去：

IE10 renders in IE7 mode. How to force Standards mode?

来源

2013-10-24 11:50:58

今天我跑进类似的问题。下拉菜单在Firefox上工作正常，但在IE中完全没有。

1-我将文件从html更改为asp。

这让我看到我有一些孤儿片段的代码。

-> My code 

-> </div> 
<td class="whatever"> 

-> <div>

我删除它，一切工作正常。

来源

2014-04-15 03:39:10 user2132859

我刚刚在“head”及其作品中加入了以下代码。

meta http-equiv="X-UA-Compatible" content="IE=edge" in matatag

来源

2015-10-30 06:04:23

CSS下拉菜单在IE10中无法正常工作

回答

相关问题