【发布时间】:2012-10-02 15:59:39
【问题描述】:
我正在为 HTML 网页开发基于 CSS 的下拉导航菜单。它在 Google Chrome、Mozilla Firefox 和 Mobile Safari 下完美呈现,问题在于 Internet Explorer 9。它不是显示为条形,而是显示带有项目符号的所有内容,就像没有分配给它的 CSS 脚本一样。我的 HTML 是标准的
<link href="menu.css" rel="stylesheet" />
和
<nav><ul><li><ul>ITEM_NAME<a href="LINKS"></ul></li></ul></nav>
格式。
我的 CSS 脚本如下所示:
nav {
margin: auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #000;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #FF6600;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 10px 10px;
color: #fff; text-decoration: none;
}
nav ul ul {
background: #000; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #333;
border-left: 2px solid #333;
border-right: 2px solid #333;
border-bottom: 1px solid #333;
position: relative;
}
nav ul ul li a {
padding: 10px 10px;
color: #fff;
}
nav ul ul li a:hover {
background: #FF6600;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
我需要做什么才能在 Internet Explorer 9 中正确渲染有什么想法吗? :) 谢谢,肖恩。
【问题讨论】:
-
我在 IE9 中测试它,在 Windows 7 64 位上。我想如果它不能在 9 上运行,它肯定不能在 IE8 或 7 上运行
-
你会这么认为,但是 IE8应该在所有元素上都支持
:hover。
标签: html css internet-explorer