CSS hover effect does not work

Question

Below code works fine, i.e. 9 and does not work in any other browser. When the mouse cursor on the background of the list changes color, but it does not work

.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} 

HTML

 <ul style="font-size:12px;"><li class="menunews"><a href="" > <span style="margin-left:2px;">Hello test</span></a></li></ul></div> 

Answer 1

You actually did CSS in some other way, why browsers don't understand your CSS code , so I made some changes to css and its functionality in all browsers according to your requirement, so I hope this helps 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"><a href="#"><span style="margin-left:2px;">Hello test</span></a></li> </ul> 

Answer 2

Define your class in ul instead of li to take effect:

 <ul class="menunews" style="font-size:12px;"><li ><a href="#" > 

Answer 3

you mentioned menunews class li , css should have been li.menunews , use the css code below

  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 view DEMO