IE 9 中带有渐变背景的 CSS 菜单上的 Z 索引或溢出问题

Question

当在菜单容器上使用渐变背景时，尝试显示带有<ul> 和<li> 的css:hover 菜单时，IE 会出现另一个问题。

悬停 li 在使用渐变背景时被截断，并且在没有渐变背景的情况下正确显示。

它适用于 Chrome 和 FF...

Demo with gradient

Demo without gradient

带有渐变的源（无需删除 .bg 类）

HTML

<div class="header bg">
<div id="menu">
    <ul>
       <li><a href="#">Menu</a>
            <ul>
               <li><a href="#">Sub-menu 1</a></li>
               <li><a href="#">Sub-menu 2</a></li>
               <li><a href="#">Sub-menu 3</a></li>
               <li><a href="#">Sub-menu 4</a></li>                
               <li><a href="#">Sub-menu 5</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>

CSS

.header {position:fixed;top:0px;right:0px;left:0px;z-index:10;height:110px;}
.bg {background-image: -moz-linear-gradient(top, #CCCCCC, #888888);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#888888));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC,endColorstr=#888888);
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC,endColorstr=#888888);    
}

#menu {width:960px;z-index:20;position:relative;height:40px;}
#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
background:#009966;
 float:left;
 padding:0;
 margin-right:1px;
}
#menu li a {
font-size:16px;display:block;width:191px;line-height:40px;color:#FFF;text-decoration:none;
 }
#menu li:hover{background:#FF6600;}
#menu ul li ul {display:none;}
#menu ul li:hover ul {display:block;}
#menu li:hover ul li {float:none;margin:0;padding-bottom:0px;}
#menu li ul li a  {text-align:left;text-indent:10px;font-size:12px;background:none;color:#000;}
#menu li ul li a:hover {}

任何人都可以帮助我如何使它与 IE 一起工作？

Answer 1

没有人找到解决方案？ ;-)

问题是通过使用 z-index 属性产生的。

这很疯狂，但是IE不喜欢这种情况，我不知道为什么，如果有人能找到好的理由，请告诉我......

Demo with gradient and without the z-index.

换行

.header {position:fixed;width:100%;left:0px;height:110px;}