2

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

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

它适用于 Chrome 和 FF ......

带渐变的演示

没有渐变的演示

带有渐变的源（无需删除 .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 一起工作吗？

4

1 回答 1

0

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

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

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

带有渐变且没有 z-index 的演示。

线路变了

.header {position:fixed;width:100%;left:0px;height:110px;}
于 2012-12-09T20:17:34.240 回答