How do I stop CSS inheritance? - css

Question

please take a look at the CSS below the subMenu li keep inheriting all the stylings from the MainMenu even when I gave it it own ones!
For example there are padding on the MainMenu, the subMenu applies them to itself as well even if I gave it it own padding it won't use them and it will still uses the ones that are on the MainMenu, Please help, thanks in advance...
#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;
}
/*////////////////////////////*/
The HTML is as follows:
<header>
<div id="wrapperHeader">
<div class="scrollable" id="headerContent">
<section class="headerLogo">
<img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/>
</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>Web Design</li>
<li>Visual Identity</li>
<li>Photography</li>
</ul>
</li>
<li>Testimonials</li>
<li>About Me</li>
<li>Get In Touch</li>
<li><a class="getStartedButton" href="get-started.html">Get Started</a></li>
</ul>
</nav>
</section>
</div>
</div>
</header>

Answer 1

According to CSS Specificity Rules
#MainMenu li
Is more specific than
.subMenu li
And that is why the latter (.subMenu li) doesn't override the former (#MainMenu li).
Try:
#mainMenu .subMenu li
And read on http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/