How to stop css inheritance in sub unorder list


Tags: html,css,inheritance,html-lists

Problem :

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


Solution :

.subMenu li  a
{
    background: none;
}

if it is not sticking, you can add the !important flag

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

    CSS Howto..

    How to reset CSS in inline? [closed]

    How do I do the exact opposite [closed]

    How is font size calculated?

    show/hide slider toggle for any number of IDs

    How to change CSS Class of an image in ListView depending on content in ASP.NET // C#

    how to route arrow from right to down css

    How to give effect on dragging in css or through jquery

    How to make a Floating Nav bar? [closed]

    How to add padding and border that doesn't change width if using 960 grid system

    How to make a scrolling website mobile friendly?

    How to make specific line cut-off points without using
    breaks because it fails responsive design

    How to stop columns wrapping in three column liquid page?

    How to add a twitter-bootstrap icon as a CSS background-image?

    How to show blocks for progressbar using CSS

    GWT: How to catch what code overrides the CSS cursor value. Or why it overrides?

    How to expand a div with css

    How do I force nested list items to be the same width as parent list item?

    How do I change the image inside an HTML5 form-validation message?

    How to get the div block to be centered in a modal window

    How to remove css from DOM

    c# cassette - how to create different css bundles for different pages

    How div automatically adjust their size and positions the element inside it

    How to center text inside a div element? [duplicate]

    How to make a header ribbon responsive

    How to dynamically manipulate elements in HTML

    How to add conditional formatting to list items in CSS

    How to position footer correctly with css?

    How to increase cell height of GWT celltable : Issue with IE?

    how to increase the photoshop sprite canvas width and height

    How to create borders in bootstrap when div is 0 height