How to stop css inheritance in sub unorder list

Question

Hi guys I am trying to setup a menu with sub menu that contains ul. My question is how to remove the sub ul menu background image that inherits from the menu ul. I appreciate any help. Thanks a lot!

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 is not sticking, you can add the !important flag

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

Answer 2

Add the following to the .subMenu li a section:

background:none !important;

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

Answer 3

Instead of adding another rule to overwrite the mistake, rewrite the selector on your first rule to only apply to the outer list items:

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

> means a direct descendant.