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中無法正常工作

回答

相關問題