2

メニューのコンテナでグラデーションの背景を使用してメニューcss:hoverを表示しようとした場合のIEのもう1つの問題。<ul><li>

ホバーliは、グラデーションbgを使用している間は切り捨てられ、グラデーションbgがなくても正しく表示されます。

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 に答える