简而言之：我有一个简单的 CSS 菜单，两个嵌套的 UL。虽然它在 Safari 和 Firefox 中运行良好，但子菜单的内容甚至背景颜色都不会在 MSIE 9 中显示。更奇怪的是，下拉菜单的左右边框都显示出来了。
为了让任何可能帮助我的人更容易，我把它放在了小提琴上。在 IE 和其他浏览器中测试一下，看看有什么区别
不要担心css底部的before标签，只关心图标（不包括在内，因此菜单中也有一些空白）
非常感谢大家，现在想弄清楚几个小时:-(
http://jsfiddle.net/Phil_B/DWD75/
html {
width:100%;
height:100%;
font-family: Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
}
body {
width:100%;
height:100%;
margin:0px;
padding:0px;
background-color:#E8E8E8;
}
#nav_content {
left:320px;
width:940px;
top:90px;
height:30px;
position:absolute;
border-bottom:5px solid #312F32;
background: linear-gradient(to bottom, #bababb 0%,#8d8b8d 100%);
background: -moz-linear-gradient(top, #bababb 0%, #8d8b8d 100%);
background: -webkit-linear-gradient(top, #bababb 0%,#8d8b8d 100%);
background: -o-linear-gradient(top, #bababb 0%,#8d8b8d 100%);
background: -ms-linear-gradient(top, #bababb 0%,#8d8b8d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababb', endColorstr='#8d8b8d',GradientType=0 );
}
#site_wrapper {
position:relative;
width:1260px;
height:100%;
margin:0 auto;
background-color:#fff;
border-color: #8D8B8D;
border-style:solid;
border-width:0 1px;
overflow:hidden;
}
#nav_content {
position:absolute;
z-index:1000;
}
a {
white-space:nowrap;
}
#nav_main {
margin:0px;
padding:0px;
list-style:none;
position:relative;
}
#nav_main > li > a, #nav_main > li > span, .nav_sub li a, .nav_sub > li > span {
text-decoration:none;
line-height:30px;
font-size:12px;
cursor:pointer;
}
#nav_main > li > a, #nav_main > li > span {
color:#fff;
text-shadow: 0 -1px 0 #000;
display:block;
padding:0px 10px 0px 30px;
position:relative;
opacity:0.7;
border-bottom:5px solid #312F32;
}
#nav_main > li {
position:relative;
display:inline-block;
padding:0px 0px;
}
#nav_main > li:hover > a, #nav_main > li:hover > span, #nav_main > li > span.active {
background: linear-gradient(to bottom, #A3A2A4 0%,#5F5D60 100%);
background: -moz-linear-gradient(top, #A3A2A4 0%, #5F5D60 100%);
background: -webkit-linear-gradient(top, #A3A2A4 0%,#5F5D60 100%);
background: -o-linear-gradient(top, #A3A2A4 0%,#5F5D60 100%);
background: -ms-linear-gradient(top, #A3A2A4 0%,#5F5D60 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A3A2A4', endColorstr='#5F5D60',GradientType=0 );
border-bottom:5px solid #D20000;
opacity:1;
}
#nav_main > li > a:before, #nav_main > li > span:before {
content:"";
position:absolute;
height:30px;
width:30px;
top:6px;
left:5px;
background-image:url(../graphics/hq_graphics.png);
background-repeat:no-repeat;
}
.nm_home:before {background-position:-10px -80px;}
.nm_categs:before {background-position:-50px -80px;}
.nm_search:before {background-position:-90px -80px;}
.nm_archive:before {background-position:-130px -80px;}
.nm_faq:before {background-position:-170px -80px;}
.nav_sub {
list-style:none;
margin:0;
padding:0;
position:absolute;
display:block;
top:35px;
left:0px;
width:auto;
height:300px;
max-height:300px;
overflow:visible;
background-color:#5F5D60;
border:1px solid #312F32;
border-top:none;
border-bottom:none;
}
#nav_main li:hover .nav_sub {
height:auto;
max-height:400px;
overflow:visible;
}
.nav_sub > li > a, .nav_sub > li > span {
font-size:11px;
display:block;
position:relative;
color:#D1D1D1;
border:none;
padding:0px 10px 0px 45px;
}
.nav_sub li:last-child {
border-bottom:1px solid #312F32;
}
.nav_sub > li > a:hover, .nav_sub > li > span.active {
background:#D1D1D1;
color:#5F5D60;
}
.nav_sub > li > a:before, .nav_sub > li > span:before {
content:"";
position:absolute;
height:30px;
width:35px;
top:0px;
left:0px;
background-image:url(../graphics/hq_graphics.png);
background-repeat:no-repeat;
border-width:0;
border-left-width:5px;
border-left-style:solid;
}
.ns_cat_politics:before {background-position:0px -116px; border-left-color:#D90000}
.ns_cat_economy:before {background-position:-40px -116px; border-left-color:#152D77}
.ns_cat_health:before {background-position:-80px -116px; border-left-color:#FFB400}
.ns_cat_education:before {background-position:-120px -116px; border-left-color:#FF7800}
.ns_cat_work:before {background-position:-160px -116px; border-left-color:#5CA7D8}
.ns_cat_justice:before {background-position:-200px -116px; border-left-color:#8C1735}
.ns_cat_environment:before {background-position:-240px -116px; border-left-color:#43A612}
.ns_cat_tourism:before {background-position:-280px -116px; border-left-color:#0060AA}
.ns_cat_culture:before {background-position:-320px -116px; border-left-color:#D2659F}
.ns_cat_sport:before {background-position:-360px -116px; border-left-color:#006629}
.ns_cat_politics:hover:before, .ns_cat_politics.active:before {background-position:0px -166px}
.ns_cat_economy:hover:before, .ns_cat_economy.active:before {background-position:-40px -166px}
.ns_cat_health:hover:before, .ns_cat_health.active:before {background-position:-80px -166px}
.ns_cat_education:hover:before, .ns_cat_education.active:before {background-position:-120px -166px}
.ns_cat_work:hover:before, .ns_cat_work.active:before {background-position:-160px -166px}
.ns_cat_justice:hover:before, .ns_cat_justice.active:before {background-position:-200px -166px}
.ns_cat_environment:hover:before, .ns_cat_environment.active:before {background-position:-240px -166px}
.ns_cat_tourism:hover:before, .ns_cat_tourism.active:before {background-position:-280px -166px}
.ns_cat_culture:hover:before, .ns_cat_culture.active:before {background-position:-320px -166px}
.ns_cat_sport:hover:before, .ns_cat_sport.active:before {background-position:-360px -166px}