My Nested <Li> Is Inheriting the Styles from Its Parent

My nested li is inheriting the styles from its parent

Well, adding a class to the top level <li> won't work - because the inner <a>'s will still be affected by:

#menu li.myclass a

I.e., they're anchor elements inside a <li> with class "myclass".

Instead, you can change the rule to:

#menu > li > a

... meaning, only <a>'s that are immediate children of <li>'s, which are immediate children of #menu, will be affected (IE6 doesn't support this). This is assuming it's your <ul> that has the id "menu".

Or you could use (mostly for IE6 compatibility):

#menu li li a
{
    /* Undo styles you applied to #menu li a */
}

Note that in this, you'll have to reset/undo/"overwrite" all the styles previously set on #menu li a that you don't want to apply to the inner anchors.

An alternative for IE6 - where you won't need to reset/undo styles - is to set a class on the <a>'s rather than the <li>'s:

#menu li a.tab

CSS Styles Inherited from Parent in Nested List

You don't state exactly what the issue is, but I'm going to assume that it's 2 things:

1) The underline text-decoration property is showing up in the sub-list items. This is a bit confusing until you look at the markup:

<ul class="experience">
  <li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios
  <ul>
    <li>Educator, Illustrator, Graphic & Web Designer</li>
   </ul>
 </li>
...

Note that the first-level list item for <ul class="experience"> is not closed until after the sub-list is closed. What this means is that the sub-list gets the underline appearance even if you over-ride it on the sub-list items (as the property is actually on the parent list item).

To get around this, wrap the part you want underlined in another element, like a span and apply the underline style to the span:

<ul class="experience">
  <li><span>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios</span>
  <ul>
    <li>Educator, Illustrator, Graphic & Web Designer</li>
   </ul>
 </li>
...

CSS:

ul.experience > li span {
  text-decoration:underline;
}

2) The other issue I assume, is the disc not showing up. That's because normalize.css removes margin and padding from all lists. Add that back in:

ul.experience ul {
  list-style: disc;
  padding-left: 2em;
}

fiddle

How to stop nested list from inheriting style from parent list?

don't use background-color in li use it in anchor

.innerLeft ul li a{
    background: red;
    display:block;
}

this will solve your issue

updated jsFiddle file

CSS inheritance : ul style not applied to nested div

Your first instinct would be to use JavaScript but for this but there's a slick way to accomplish this with what are essentially operators in CSS...

Use the :hover pseudo-class on a parent element and look for the instance of the dropdown.

.nav:hover .dropdown-content {
    display: block;
}

Because you're selecting the parent element, it applies to both the dropdown and what you hover over to show it over so it's displayed whenever it's within those realms. Make more and they'll work just the same respective to their individual dropdowns.

https://jsfiddle.net/ksxk33w4/1/

list elements not inheriting styles from parents

The p tag can not contain block level elements.
So the browser automaticaly closes the p tag for you.
Your html will parse like this:

<!DOCTYPE html>
<html>
    <title>test</title>
    <head>
        <style type="text/css">
        p {
            color: blue;
        }
        </style>
    </head>
    <body>
        <p>
            Hello World !
        </p>
            <ol>
                <li>role1</li>
                <li>role2</li>
            </ol>
            <p>
                Inside nested p
            </p>
    </body>
</html>

And now you see why Hello world and Inside nested p are blue and the li elements are not

How do I prevent CSS inheritance?

As of yet there are no parent selectors (or as Shaun Inman calls them, qualified selectors), so you will have to apply styles to the child list items to override the styles on the parent list items.

Cascading is sort of the whole point of Cascading Style Sheets, hence the name.

Inheritance of css in li, ul and ol. Explanation or reference needed

Let's divide your question into 2 parts,

what exactly ul > li means?

For CSS color property, it doesn't mean the first children of ul only, it also means some elements & their properties inside the children unless you set different color for them, for example-

<style>
  ul > li {
    color: red;
  }
</style>

<ul>
  <li>HOME</li>
  <li> MY ROOMS
    <ul>
      <li>BED ROOM</li>
      <li>KITCHEN</li>
    </ul>
  </li>
  <li>GARDEN</li>
</ul>

How to stop nested list overlapping parent list?

.innerLeft ul li {
    clear: left; /* Added */
    padding:0px;
    margin:0px 0 10px 0;
    height:18px;
}

http://jsfiddle.net/wHztz/70/

My Nested <Li> Is Inheriting the Styles from Its Parent