1

我想知道你是否可以帮助我。我正在尝试仅使用 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%; }
4

5 回答 5

2

今天我遇到了类似的问题。下拉菜单在 Firefox 上运行良好，但在 IE 中根本不行。

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

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

-> My code

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

-> <div>

我删除了它，一切正常。

于 2014-04-15T03:39:10.667 回答
1

我刚刚在“head”中添加了以下代码，它对我有用。

meta http-equiv="X-UA-Compatible" content="IE=edge" in matatag
于 2015-10-30T06:04:23.253 回答
0

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

如果您使用的是 php，请在您的网站标题中添加以下内容以强制 IE 10 使用标准模式...答案归于：

IE10 以 IE7 模式呈现。如何强制标准模式？

于 2013-10-24T11:50:58.080 回答
0

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

参考现场演示

于 2013-06-20T15:21:46.250 回答
0

我遇到了完全相同的问题。原来我失踪了。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
于 2013-07-15T01:57:22.470 回答