how to prevent css inherit [duplicate]

Question

Below are the sample code block i use. I have two set of css, and want to apply onto two UL component. however, the result come out, the inner "UL" will hold some of the css which defined for its parent. and even some of the css defined in "b" will be override by "a"... nightmare...

how can i stop the inheritance???

<ul class="moduleMenu-ul">     /* for loop begin */         <li class="moduleMenu-li">                   <a></a>         </li>     /* for loop end */      <li class="moduleMenu-li">           <a>On Over the div below will be show</a>           <div id="extraModuleMenuOptions">                 <ul class="flow-ul">                  /*for loop begin*/                     <li class="flow-li">                           <a class="flow-a"></a>                     </li>                  /*for loop end*/                 </ul>           </div>      </li> </ul 

CSS:

.moduleMenu-ul {     width: 100%;     height: 43px;     background: #FFF url("../images/module-menu-bg.gif") top left repeat-x;     font-weight: bold;     list-style-type: none;     margin: 0;     padding: 0; }  .moduleMenu-ul .moduleMenu-li {     display: block;     float: left;     margin: 0 0 0 5px; }  .moduleMenu-ul .moduleMenu-li a {     height: 43px;     color: #777;     text-decoration: none;     display: block;     float: left;     line-height: 200%;     padding: 8px 15px 0;     text-transform:capitalize; } 

.moduleMenu-ul .moduleMenu-li a:hover { color: #333; }

.moduleMenu-ul .moduleMenu-li a.current{     color: #FFF;     background: #FFF url("../images/module-menu-current-bg.gif") top left repeat-x;     padding: 5px 15px 0; }  #extraModuleMenuOptions {     z-index:99999;     visibility:hidden;     position:absolute;     color:#FFFFFF;     background-color:#236FBD; }  #extraModuleMenuOptions .flow-ul {     text-align:left; }  #extraModuleMenuOptions .flow-ul .flow-li {     display:block; }  #extraModuleMenuOptions .flow-ul .flow-li .flow-a {     color:#FFFFFF; } 

Answer 1

lets say you have this:

<ul>     <li></li>     <li>         <ul>             <li></li>             <li></li>         </ul>     </li>     <li></li> <ul> 

Now if you DONT need IE6 compatibility (reference at Quirksmode) you can have the following css

ul li { background:#fff; } ul>li { background:#f0f; } 

The > is a direct children operator, so in this case only the first level of lis will be purple.

Hope this helps