Inheritance in CSS? Possible to do this without copy and paste?

I'm trying to follow the nifty tutorial at http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery and well, it hit me that I'm trying to use jquery's CSS for theming.. So if I have a menu like

<ul id="AVPNav">
  <li><a href="#">Agfdts</a>
    <ul>
      <li><a href="~/Apfgsdfg.aspx?node=add">Add</a></li>
      <li><a href="~/Agfdsgpx?node=find">Find</a></li>
    </ul>
  </li>
  <li><a href="#">Repdfsgs</a></li>
  <li><a href="#">Ssdfgrt开发者_如何转开发</a></li>
  <li><a href="#">Adgfdminisgfdon</a></li>
</ul>

Well, instead of using custom colors and such, I'd like to use .ui-state-default and .ui-state-hover

How would I use these classes without copy and pasting them into my own custom css class based on AVPNav?

Also, I'm looking for a pure css/html solution, but some light jquery use would be ok if it is the only way.

You can asssign class to DOM element only by hands or via javascript.

CSS does not support this.

You must define the CSS yourself, or include the jquery CSS files in your application.

There is no such thing as inheritance in CSS - even the inherit attribute value refers to DOM-level inheritance, not inheritance of CSS selectors.

Having said that, the ability to apply multiple classes to a single element is usually perfectly sufficient for most people:

<li id="someItem" class="someClass ui-state-default"> ...

If that won't work for you, then I'm afraid it's time for some CTRL+C, CTRL+V.