Comment arrêter l'héritage css dans la liste de sous-ordre

Question

J'essaie de configurer un menu avec sous-menu qui contient ul. Ma question est de savoir comment supprimer l'image d'arrière-plan du menu sub qui hérite du menu ul. J'apprécie toute aide. Merci beaucoup!

mon 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; 
} 

si elle ne colle pas, vous pouvez ajouter le drapeau importante

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

Answer 2

Ajouter ce qui suit à la! .subMenu li a section:

background:none !important; 

Edit: onglet Ouvert avant durilai a répondu, donc je ne vois pas sa réponse ...

Answer 3

Au lieu d'ajouter une autre règle pour remplacer l'erreur, réécrire le sélecteur sur votre premier règle à appliquer uniquement aux éléments de la liste extérieure:

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

> signifie un descendant direct.