CSS悬停菜单在IE9中消失......但显示阴影?

时间:2012-01-09 00:42:13

标签: css css3 hover internet-explorer-9

设置一个新的CSS:悬停菜单后,它可以全面运行......除了IE(doh!)。您会看到在IE9中,菜单内容完全不可见,但奇怪的是它仍然会产生阴影。下图比较结果:

CSS menu shadow in IE9

我尝试过什么

我尝试了两种方法1)添加透明的PNG背景,如某些人所报告的解决方案,以及2)添加Microsoft悬停行为(csshover.htc)。

以下代码

.nav {}
.nav li {float: left; position: relative; z-index:10; }
.nav li.search-li {padding: 14px 8px 14px 5px; width:21px; height:26px;}
.nav .search-li ul {width:343px; text-align:center;}
.nav .search-li input[type="text"] {margin:0;padding:5px 10px; border:none; height:20px;font-size:16px;font-weight:bold;border-radius: 3px;}
.nav .search-li input[type="submit"] {padding:5px 10px; height:30px; border:none;background:#0066CC; color:#FFFFFF;font-size:16px;font-weight:bold;border-radius: 3px}
.nav li a { font-family:'LeagueGothicRegular'; margin: 4px 0 0 0; padding: 10px 13px 14px 10px; display: block; font-size:22px; color: #fff; text-transform: uppercase; text-shadow: 0px 1px 1px #444;}
.nav li:hover {
    background: #222222; /* Old browsers */
    background: -moz-linear-gradient(top, #45454E 0%, #222222 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45454E), color-stop(100%,#222222)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #45454E 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #45454E 0%,#222222 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #45454E 0%,#222222 100%); /* IE10+ */
    background: linear-gradient(top, #45454E 0%,#222222 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35353e', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
    text-decoration: none;
    box-shadow: 5px 3px 5px #15151e;
}

.nav li ul {
    padding:16px 5px;
    display: none;
    position: absolute; 
    top: 53px; left: 0; z-index: 1000;
    background:#222222;
    -webkit-box-shadow: 5px 3px 5px #15151e;
    -moz-box-shadow: 5px 3px 5px #15151e;
    box-shadow: 5px 3px 5px #15151e;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-radius: 0px 6px 6px 6px;
    border-radius: 0px 6px 6px 6px;
} /* sub nav starts here */
.nav li:hover ul {display: inline-block;} /* suppport in ie7 and on */
.nav li li {float: none; display:inline-block; z-index:1001; background:url(images/transparent.png) #222222; }
.nav li li a {width: 135px; height: 19px; float:none; margin: 0; padding: 4px 12px 0; font-family:Arial, Helvetica, sans-serif; font-size:13px; text-transform:capitalize; }
.nav li li:hover {background:none; box-shadow: none; border-radius:none;}

非常感谢任何建议或已知修复!

1 个答案:

答案 0 :(得分:4)

行。我的怀疑是正确的。问题肯定出在这一行:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35353e', endColorstr='#222222',GradientType=0 ); /* IE6-9 */

评论出来,问题就消失了。将看看我是否能找到一个允许网站工作的修复程序和渐变...