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

>表示直接后裔。

如何在子无序列表中停止css继承

3 个答案: