设置一个新的CSS:悬停菜单后,它可以全面运行......除了IE(doh!)。您会看到在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;}
非常感谢任何建议或已知修复!
答案 0 :(得分:4)
行。我的怀疑是正确的。问题肯定出在这一行:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35353e', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
评论出来,问题就消失了。将看看我是否能找到一个允许网站工作的修复程序和渐变...