How can i overwrite the parent Style to an element

<div class="jqueryslidemenu">
<ul>
<li  class="menuitem">TEST1</li>
<li  class="navOFFTDDisabled" id="TEST2">TEST2</li>
<li  class="navOFFTDDisabled" id="TEST3">TEST3</li>
<li  class="navOFFTDDisabled" id="TES开发者_开发问答T4">TEST4</li>
</ul>
</div>


CSS FILE 
.jqueryslidemenu ul li {
display: block;
background: #FFCC00; 
color: white;
padding: 4px 12px 6px 5px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
font-weight: bold;
cursor: hand;
}

.navOFFTDDisabled{
//Aplly Style 
}

I cannot Apply class="navOFFTDDisabled" to each (li) Items because the "jqueryslidemenu" is overwriting the navOFFTDDisabled style .How can i apply both styles

---

Make it a better match,

.jqueryslidemenu ul li.navOFFTDDisabled{
//I'm more important neener neener.
}

Just to be more useful, you can actually calculate which selector with take precedence as described in the specification

---

You have three possibilities to override a selector:

1. order of the selector: a selector further down in your stylesheet overrides a selector that is further to the top

2. selector specifity: http://www.w3.org/TR/CSS2/cascade.html and http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/

   basically it depends on how many tags, classes and ids you have in your selector. classes add more weight than tags and ids add more weight than classes

3. the last thing you can do is to add an !importantto your style rule, which overrides any other selector. To be correct you can still have more !importantrules, than the selector specifity rule comes into play again. E.g. .klass{color:red !important}