麻煩IE8對菜單懸停元素的背景gradiation，在所有其他瀏覽器

Question

在這裏工作的網站：http://www.mccaonline.com

我已經聘請了具有網站上的gradiated菜單上的問題而努力。該菜單在Firefox，Chrome和Safari中正常運行 - 當您將鼠標懸停在菜單元素上時，背景將變爲淺漸變綠色。但是，在IE8和IE9中，所有子菜單元素都會分配淺綠色漸變背景。

Here's how it looks in IE8

我只是希望它的功能在Internet Explorer相同，也弄不清是什麼導致它會對所有子菜單元素的gradiated背景。我使用導航的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; 
} 

讓我知道你想什麼，或者可能會造成這個。我非常感謝任何幫助！

Answer 1

你的風格不使用.SUB菜單類，你嘗試刪除背景，像類：

.sub-menu .menu-item { 
    background: ... 

Answer 2

在你的CSS添加此。

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

你會得到你的解決方案。

Answer 3

脫掉你的過濾標籤並處理jquery中的菜單。它會影響菜單上的2個級別。