如何在子unorder列表中停止css繼承

Question

我正在嘗試設置包含ul的子菜單的菜單。 我的問題是如何刪除從菜單ul繼承的子ul菜單背景圖像。 我感謝任何幫助。 非常感謝！

我的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;
}

如果它沒有粘住，你可以添加！important標志

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

Answer 2

將以下內容添加到.subMenu li a部分：

background:none !important;

編輯：在durilai回答之前打開標簽，所以我沒有看到他的回答......

Answer 3

而不是添加另一個規則來覆蓋錯誤，而是在第一個規則上重寫選擇器以僅應用於外部列表項：

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

>指直系后代。