CSS hover effect is not working on my code - html

Question

Below code works fine in ie 9 and doesn't work in any other browser. When I mouse hover on list background should change the color, but it doesn't.
.menunews ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menunews a {
display: block;
color: #266CAE;
height: 30px;
background: #ffffff;
border-bottom: 1px solid #ccc;
overflow: hidden;
width: 100%;
height: 2.72em;
line-height: 2.75em;
text-indent: 2.02em;
text-decoration: none;
}
.menunews li a:hover {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color- stop(47%, #f6f6f6), color-stop(100%, #ededed));
background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
color: #266CAE
}
<ul style="font-size:12px;">
<li class="menunews">
<span style="margin-left:2px;">Hello test</span>
</li>
</ul>

Answer 1

hey actually you made the CSS in some other way that's why browsers doesn't understand your css code so i made some changes in your css and its working fine on all browsers as per your requirement so i hope this will help you.....
ul li.menunews {
border-bottom: 1px solid #ccc;
list-style:none;
height:30px;
}
ul li.menunews a {
display:block;
color:#266CAE;
text-decoration:none;
}
ul li.menunews:hover {
background:#ffffff;
background:-moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color- stop(47%,#f6f6f6), color-stop(100%,#ededed));
background:-webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );color:#266CAE}
}
<ul style="font-size:12px;">
<li class="menunews"><span style="margin-left:2px;">Hello test</span></li>
</ul>

Answer 2

Define your class in ul instead of li so as to take effect :
<ul class="menunews" style="font-size:12px;"><li ><a href="#" >

Answer 3

you have mentioned menunews class to li, the css should have been li.menunews ,use the below css code
ul{
margin:0px;
padding:0px;
list-style-type:none;
}
.menunews a{
display:block;
color:#266CAE;
height:30px;
background:#ffffff;
border-bottom: 1px solid #ccc;
overflow:hidden;
width:100%;
height:2.72em;
line-height:2.75em;
text-indent:2.02em;
text- decoration:none;
}
li.menunews a:hover{
background:#ffffff;
background:-moz-linear-gradient(top,#ffffff 0%,#f6f6f6 47%, #ededed 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color- stop(47%,#f6f6f6), color-stop(100%,#ededed));
background:-webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
color:#266CAE;
}
Please see this DEMO