Html 嵌套列表CSS菜单不显示MSIE 9中的内容

Html 嵌套列表CSS菜单不显示MSIE 9中的内容,html,css,internet-explorer,html-lists,Html,Css,Internet Explorer,Html Lists,简而言之: 我有一个简单的CSS菜单,两个嵌套的ULs。虽然它在Safari和Firefox中运行良好,但在MSIE9中,子菜单的内容甚至背景色都不会显示出来。更奇怪的是,下拉列表的左边框和右边框都显示出来了 为了方便任何可能帮助我的人,我把它放在小提琴上。 在IE和其他浏览器中进行测试以查看差异 不要担心css底部的before标记,只关心图标(不包括在内,因此菜单中也有一些间隙) 提前向大家表示衷心的感谢,现在我们要花几个小时来解决这个问题:-( 发布一个只包含相关部分的CSS的最低版本。

简而言之: 我有一个简单的CSS菜单,两个嵌套的ULs。虽然它在Safari和Firefox中运行良好,但在MSIE9中,子菜单的内容甚至背景色都不会显示出来。更奇怪的是,下拉列表的左边框和右边框都显示出来了

为了方便任何可能帮助我的人,我把它放在小提琴上。 在IE和其他浏览器中进行测试以查看差异

不要担心css底部的before标记,只关心图标(不包括在内,因此菜单中也有一些间隙)

提前向大家表示衷心的感谢,现在我们要花几个小时来解决这个问题:-(


发布一个只包含相关部分的CSS的最低版本。没有人有时间计算出哪个位是@Bojangles,谢谢,对不起,完全正确!对所有人来说,我想我在几秒钟前找到了一个解决方法。我会检查它,目前这个主题似乎已经结束。如果你找到了解决方案,请将它作为你自己问题的答案发布开-这是一种关闭线程的方式。我猜你有
不透明度:0.7;
。我对IE9不肯定(我在mac上),但我知道IE8及以下版本不支持不透明度或rgba,只会显示没有背景。(100%确定rgba为背景)
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}