【发布时间】：2013-02-05 08:29:53
【问题描述】：
我有一个 CSS 下拉代码，它在除 IE8 怪癖模式之外的所有浏览器中都能正常工作。 严重卡住我的代码请帮助。我认为悬停在 IE8 怪癖模式下不起作用。 我对css不太了解，请指导。
这里是html
<UL id=navmenu-h>
<LI><A href="#">Home</A></LI>
<LI><A href="#">Paper Rolls </A>
<UL>
<LI><A href="#">ATM Rolls </A></LI>
</UL>
</LI>
</UL>
这里是css
UL#navmenu-h {
Z-INDEX: 1; POSITION: relative; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; BACKGROUND: #54b948; PADDING-TOP: 0px
}
UL#navmenu-h UL {
Z-INDEX: 1; POSITION: absolute; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 200px; PADDING-RIGHT: 0px; DISPLAY: none; TOP: 100%; PADDING-TOP: 0px; LEFT: 0px
}
UL#navmenu-h UL UL {
Z-INDEX: 1; TOP: 0px; LEFT: 100%
}
UL#navmenu-h UL UL UL {
Z-INDEX: 1; TOP: 0px; LEFT: 100%
}
UL#navmenu-h LI {
Z-INDEX: 1; POSITION: relative; DISPLAY: inline; FLOAT: left; COLOR: #54b948
}
UL#navmenu-h UL LI {
Z-INDEX: 1; WIDTH: 100%
}
UL#navmenu-h A {
Z-INDEX: 1; PADDING-BOTTOM: 6px; PADDING-LEFT: 6px; WIDTH: auto; PADDING-RIGHT: 6px; DISPLAY: block; FONT: bold 13px Arial, sans-serif; BACKGROUND: #54b948; FLOAT: left; COLOR: #fff; BORDER-RIGHT: #fff 0px solid; TEXT-DECORATION: none; PADDING-TOP: 6px
}
UL#navmenu-h A:hover {
Z-INDEX: 1; BORDER-BOTTOM-COLOR: #f0f0f0; BORDER-TOP-COLOR: #f0f0f0; BACKGROUND: #54b948; COLOR: #fff; BORDER-RIGHT-COLOR: #f0f0f0; BORDER-LEFT-COLOR: #f0f0f0
}
UL#navmenu-h LI:hover A {
Z-INDEX: 1; BORDER-BOTTOM-COLOR: #f0f0f0; BORDER-TOP-COLOR: #f0f0f0; BACKGROUND: #54b948; COLOR: #fff; BORDER-RIGHT-COLOR: #f0f0f0; BORDER-LEFT-COLOR: #f0f0f0
}
UL#navmenu-h LI:hover LI:hover LI A:hover {
BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI:hover A {
BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover UL UL {
DISPLAY: none
}
UL#navmenu-h LI:hover UL UL UL {
DISPLAY: none
}
UL#navmenu-h LI:hover UL UL UL UL {
DISPLAY: none
}
UL#navmenu-h LI:hover UL UL UL UL UL {
DISPLAY: none
}
UL#navmenu-h LI:hover UL {
DISPLAY: block
}
UL#navmenu-h UL LI:hover UL {
Z-INDEX: 1; DISPLAY: block
}
UL#navmenu-h UL UL LI:hover UL {
Z-INDEX: 1; DISPLAY: block
}
UL#navmenu-h UL UL UL LI:hover UL {
Z-INDEX: 1; DISPLAY: block
}
UL#navmenu-h UL UL UL UL LI:hover UL {
Z-INDEX: 1; DISPLAY: block
}
UL#navmenu-h LI:hover LI A {
Z-INDEX: 1; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; FONT: bold 11px Arial, sans-serif; BACKGROUND: #fff; FLOAT: none; COLOR: #656565; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid
}
UL#navmenu-h LI:hover LI:hover LI A {
Z-INDEX: 1; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; FONT: bold 11px Arial, sans-serif; BACKGROUND: #fff; FLOAT: none; COLOR: #656565; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid
}
UL#navmenu-h LI:hover LI:hover LI:hover LI A {
Z-INDEX: 1; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; FONT: bold 11px Arial, sans-serif; BACKGROUND: #fff; FLOAT: none; COLOR: #656565; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid
}
UL#navmenu-h LI:hover LI:hover LI:hover LI:hover LI A {
Z-INDEX: 1; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; FONT: bold 11px Arial, sans-serif; BACKGROUND: #fff; FLOAT: none; COLOR: #656565; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid
}
UL#navmenu-h LI:hover LI A:hover {
Z-INDEX: 1; BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover A {
Z-INDEX: 1; BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI:hover LI A:hover {
Z-INDEX: 1; BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI:hover LI:hover A {
Z-INDEX: 1; BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI:hover LI:hover LI A:hover {
Z-INDEX: 1; BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI:hover LI:hover LI:hover A {
Z-INDEX: 1; BACKGROUND: #54b948; COLOR: #fff
}
.menuColor {
BACKGROUND-COLOR: #54b948
}
【问题讨论】：
-
为什么要兼容怪癖模式？我不明白。
-
我没有阅读您的问题，但看了您的帖子，我发现您在 HTML 标记中使用了大写字母。不要这样做。在您的 HTML 标记中始终使用小写字母。这是一个很好的做法。
-
我们的应用程序被许多用户使用，因此我们不希望用户每次访问我们的网站时都更改浏览器设置
-
如果他们的浏览器处于怪癖模式，那是因为你把它放在那里，但你永远不想处于怪癖模式。 Quirks 模式的 box 模型与 strict 不同，这就是您遇到此问题的原因。别再把用户的观点放在怪癖里了！
标签： html css internet-explorer drop-down-menu