Как остановить наследование CSS?

Question

, пожалуйста, взгляните на CSS ниже subMenu li, наследуя все стили из MainMenu, даже когда я дал ему свои собственные!

Например, есть дополнения на MainMenu, subMenu применяет их и к себе, даже если я дал ему собственное дополнение, он не будет их использовать, и он по-прежнему будет использовать те, которые находятся на MainMenu, пожалуйста, помогите , заранее спасибо ...

#headerMenu{ 
    float: right; 
} 

/*Main Menu*/ 
#MainMenu li{ 
    padding: 8px 12px 5px 12px; 
    position: relative; 
    list-style: none; 
    float: left; 
} 

#MainMenu a{ 
    color: #757575; 
}  

#MainMenu a:hover{ 
    color: #7FA0BA; 
} 

#MainMenu a.active{ 
    color: #305067; 
} 

#MainMenu li a.getStartedButton{ 
    color: #A3C182; 
} 

#MainMenu li a.getStartedButton:hover{ 
    color: #7FA0BA; 
} 

/*SubMenu*/ 
ul.subMenu{ 
    background-color: #FFFFFF; 
    border: 1px solid black; 

    position: absolute; 
    top: 49px; 

    -webkit-box-shadow: 0px 4px 15px -5px rgba(0,0,0,0.43); 
    -moz-box-shadow: 0px 4px 15px -5px rgba(0,0,0,0.43); 
    box-shadow: 0px 4px 15px -5px rgba(0,0,0,0.43); 
} 

.subMenu li{ 
    background-color: orange; 

    width: 95px; 

    padding: 2px 2px 2px 3px; 
    position: relative; 

    text-align: left; 
    list-style: none; 

} 

.subMenu li a{ 
    background-color: black; 
} 

/*Tablets & Smart Phones (Must Be Hidden From Widescreen)*/ 
.SecondHeader-button,#SecondHeader{ 
    display: none; 
} 

/*////////////////////////////*/  

HTML, выглядит следующим образом:

<header> 
      <div id="wrapperHeader"> 
       <div class="scrollable" id="headerContent"> 
        <section class="headerLogo"> 
         <a href="index.html"><img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/></a> 
        </section> 
        <section id="headerMenu"> 
         <nav> 
          <ul id="MainMenu"> 
           <li><a class="active" href="index.html">Home</a></li> 
           <li><a class="SubMenu" href="#">Portfolio</a> 
            <ul class="subMenu"> 
             <li><a href="web-design.html">Web Design</a></li> 
             <li><a href="visual-identity.html">Visual Identity</a></li> 
             <li><a href="photography.html">Photography</a></li> 
            </ul> 
           </li> 
           <li><a href="testimonials.html">Testimonials</a></li> 
           <li><a href="about.html">About Me</a></li> 
           <li><a href="contact.html">Get In Touch</a></li> 
           <li><a class="getStartedButton" href="get-started.html">Get Started</a></li> 
          </ul> 
         </nav> 
        </section> 
       </div> 
      </div> 
     </header> 

Answer 1

Согласно CSS Specificity Rules

#MainMenu li 

более специфичен, чем

.subMenu li 

И именно поэтому последний (.subMenu li) не отменяет прежний (#MainMenu li).

Try:

#mainMenu .subMenu li 

И читать дальше http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/