如何停止CSS继承

Question

请看一下subMenu下面的CSS li保持继承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）。

尝试：

#mainMenu .subMenu li

继续阅读http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/