Question

我想知道你是否可以帮助我。我正在尝试使用HTML和CSS创建一个下拉菜单。但是，我的悬停功能在以前的IE10中不起作用。它适用于其他浏览器，如firefox和chrome，但不适用于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%; }

Answer 1

今天我遇到了类似的问题。下拉菜单在Firefox上工作正常，但在IE中根本没有。

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

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

-> My code

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

-> <div>

我删除了它，一切正常。

Answer 2

我刚在＆＃34; head＆＃34;中添加了以下代码它对我有用。

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

Answer 3

当我将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

Answer 4

我遇到了完全相同的问题。结果我失踪了。

在我的HTML页面顶部输入以下内容解决了我的问题：

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

Answer 5

问题是IE10呈现“怪癖”模式。因此，如果您将其更改为“标准”模式，它应该可以正常工作。

在您网站的头部添加以下内容以强制IE 10使用标准模式如果你正在使用PHP ...答案的信用是：

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

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

5 个答案: