How to stop css inheritance in a submenu list

Question

I am trying to customize a menu with a submenu that contains ul. My question is how to remove the background image of a submenu that is inherited from the ul menu. I appreciate any help. Many thanks!

my html

<ul id="menuBar"> <li id="test1">test1</li> <li id="test2"><a href="#">Pro1</a> <div class="subMenu"> <ul> <li><a href="#">sub1</a></li> //all li a would get the same //backgroundimage btForTest2.jpg // butI just want a clean background <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> <ul> <li><a href="#">Volleyball</a></li> <li><a href="#">Walking</a></li> <li><a href="#">Water Shoes</a></li> </ul> </div> <!--end of submenu--> </li> </ul> 

CSS

  #menuBar #mens a{ background:url("../images/btForTest2.jpg") no-repeat; display:block; border-right:1px solid #ffffff; width:112px; height:37px; } .subMenu li a{ list-style:none; margin: 0; padding: 5px; width: 200px; //width is 112px not 200 px float: left; color:#ffffff; text-decoration:none; } 

Answer 1

 .subMenu li a { background: none; } 

if it does not stick, you can add a flag!

 .subMenu li a { background: none !important; } 

Answer 2

Add the following to the .subMenu li a section:

 background:none !important; 

Edit: open tab before durilai answer, so I didn't see his answer ...

Answer 3

Instead of adding another rule to overwrite the error, rewrite the selector in the first rule only for external elements of the list:

 #menuBar > li > a { background: red; } 

> means direct descendant.