0

ウェブサイトはこちら: http://www.mccaonline.com

サイトのグラデーション メニューに関する問題に取り組むために雇われました。メニューは、Firefox、Chrome、および Safari で適切に機能します。メニュー要素にカーソルを合わせると、背景が明るいグラデーション グリーンに変わります。ただし、IE8 および IE9 では、すべてのサブメニュー要素に薄緑色のグラデーション背景が割り当てられます。

IE8での表示はこんな感じ

Internet Explorerでも同じように機能させたいだけで、すべての子メニュー要素の背景がグラデーションになっている原因がわかりません。ナビゲーションに使用している CSS は次のとおりです。

#navigation {
    background: rgb(100,135,125); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: -moz-linear-gradient(top,  rgba(100,135,125,1) 0%, rgba(126,181,165,1) 50%,   rgba(126,181,165,1) 52%, rgba(143,190,174,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,135,125,1)), color-stop(50%,rgba(126,181,165,1)), color-stop(52%,rgba(126,181,165,1)), color-stop(100%,rgba(143,190,174,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(126,181,165,1) 50%,rgba(126,181,165,1) 52%,rgba(143,190,174,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(126,181,165,1) 50%,rgba(126,181,165,1) 52%,rgba(143,190,174,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(126,181,165,1) 50%,rgba(126,181,165,1) 52%,rgba(143,190,174,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(126,181,165,1) 50%,rgba(126,181,165,1) 52%,rgba(143,190,174,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64877d', endColorstr='#8fbeae',GradientType=0 ); /* IE6-8 */
}
/*  HOVER STATE OF NAV BAR  */
#navigation ul.nav > li:hover,
#navigation ul.nav > li a:hover,
ul.nav li.current_page_item a,
ul.nav li.current_page_parent a,
ul.nav li.current-menu-ancestor a,
ul.nav li.current-cat a,
ul.nav   li.li.current-menu-item a {
    background: rgb(100,135,125); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: -moz-linear-gradient(top,  rgba(100,135,125,1) 0%, rgba(136,197,158,1) 47%, rgba(196,233,188,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,135,125,1)), color-stop(47%,rgba(136,197,158,1)), color-stop(100%,rgba(196,233,188,1))); /*   Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(136,197,158,1) 47%,rgba(196,233,188,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(136,197,158,1) 47%,rgba(196,233,188,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(136,197,158,1) 47%,rgba(196,233,188,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(136,197,158,1) 47%,rgba(196,233,188,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64877d', endColorstr='#c4e9bc',GradientType=0 ); /* IE6-8 */
    color: #ffffff;
} 
 #navigation { 
    background: rgb(100,135,125); /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: -moz-linear-gradient(top,  rgba(100,135,125,1) 0%, rgba(126,181,165,1) 50%,   rgba(126,181,165,1) 52%, rgba(143,190,174,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,135,125,1)), color-stop(50%,rgba(126,181,165,1)), color-stop(52%,rgba(126,181,165,1)), color-stop(100%,rgba(143,190,174,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(126,181,165,1) 50%,rgba(126,181,165,1) 52%,rgba(143,190,174,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(126,181,165,1) 50%,rgba(126,181,165,1) 52%,rgba(143,190,174,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(126,181,165,1) 50%,rgba(126,181,165,1) 52%,rgba(143,190,174,1) 100%); /* IE10+ */ 
    background: linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(126,181,165,1) 50%,rgba(126,181,165,1) 52%,rgba(143,190,174,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64877d', endColorstr='#8fbeae',GradientType=0 ); /* IE6-8 */ 
} 
/*  HOVER STATE OF NAV BAR  */ 
#navigation ul.nav > li:hover, 
#navigation ul.nav > li a:hover, 
ul.nav li.current_page_item a, 
ul.nav li.current_page_parent a, 
ul.nav li.current-menu-ancestor a, 
ul.nav li.current-cat a, 
ul.nav   li.li.current-menu-item a { 
    background: rgb(100,135,125); /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: -moz-linear-gradient(top,  rgba(100,135,125,1) 0%, rgba(136,197,158,1) 47%, rgba(196,233,188,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,135,125,1)), color-stop(47%,rgba(136,197,158,1)), color-stop(100%,rgba(196,233,188,1))); /*   Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(136,197,158,1) 47%,rgba(196,233,188,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(136,197,158,1) 47%,rgba(196,233,188,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(136,197,158,1) 47%,rgba(196,233,188,1) 100%); /* IE10+ */ 
    background: linear-gradient(top,  rgba(100,135,125,1) 0%,rgba(136,197,158,1) 47%,rgba(196,233,188,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64877d', endColorstr='#c4e9bc',GradientType=0 ); /* IE6-8 */ 
    color: #ffffff; 
}

何を考えているのか、何が原因なのか教えてください。どんな助けでも大歓迎です！

4

3 に答える 3

1

これを css に追加します。

#navigation ul.nav .sub-menu li:hover , #navigation ul.nav .sub-menu li a:hover {background:none!important

あなたはあなたの解決策を得るでしょう。

于 2012-08-30T18:01:03.653 に答える
0

あなたのスタイルは .sub-menu クラスを使用していません。次のようなクラスで背景を削除しようとしましたか?

.sub-menu .menu-item {
  background: ...
于 2012-08-30T17:44:15.417 に答える
0

フィルター タグを外して、jquery でメニューを処理します。つまり、メニューの 2 レベル下に影響します。

于 2012-12-20T19:47:24.043 に答える